<!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">
  <!-- excel -->
  <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  <!-- 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>
         Consolidated PR
        </h1>
        <ol class="breadcrumb">
          <li><a href="{{route('sea.purchase.request.index')}}"><i class="fa fa-dashboard"></i>Consolidated PR</a></li>
          <li class="active">list</li>
        </ol>
      </section>


      <div class="box-header with-border">
        @if(Session::has('msg'))
        <div class="alert alert-danger alert-dismissible">
          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
          Please add supplier for each product.
        </div>
       @endif

        @if(Session::has('update'))
        <div class="alert alert-info alert-dismissible">
          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
          Updated Successfully
        </div>
        @endif        
      </div>

           <!-- Main content -->
      <section class="content">
        
        <!-- Main row -->
        <div class="row">
          <!-- Left col -->
          <section class="col-lg-12 connectedSortable">
            <!-- Custom tabs (Charts with tabs)-->

          <div class="box">
            <div class="box-header">
              <h3 class="box-title">Purchase Request List</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
            <form id="myform" action="{{route('pr.insert')}}" method="POST">
            <input type="hidden" name="purchase_request_sea_id" id="purchase_request_sea_id" value="{{$purchase_request_sea_id}}">
              <input type="hidden" name="prid" id="prid" value="{{$prid}}">
              <input type="hidden" name="flag_check" id="flag_check" value="0">
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>Sl No.</th>
                  <th>Product</th>
                  <th>Unit</th>
                  <th>Packing</th>
                  <th>Req Qty</th>
                  <th>Apr Qty</th>
                  <th>Bal qty</th>
                  <th style="width: 100px;">Supplier Price List</th>
                  <th style="width: 100px;">Add Supplier</th>
                  <th style="width: 100px;">MR List</th>
                  <th></th>
                </tr>
                </thead>
                <tbody>
                 <?php $c = 1; ?>
                @if($purchase_products)
                 @foreach($purchase_products as $list)
                <tr> 
                  <td>{{$c++}}<input type="hidden" name="id[]" class="id"  value="{{ $list->id }}" /></td>
                  <td>{{$list->product->name}}</td>
                  <td>{{$list->unit->unit}}</td>
                  <td> @if($list->grade != NULL){{$list->grade->grade}}@endif</td>
                 <td>{{ $list->qty }}</td>

                  <td style="width: 119px;"><input type="number" min="0" name="apr_qty[]" placeholder="Enter Qty" value="{{$list->apr_qty}}" class="form-control apr_qty{{$list->id}}"/></td>
                  <td>{{$list->bal_qty}}</td>
                   <td>
                    <a class="btn" data-toggle="modal" data-target="#modal-info" onclick="jsPriceList({{$list->id}})"><i class="fa fa-fw fa-newspaper-o" style="color: green;"></i></a>
                      
                  </td>

                  <td>
                    <a class="btn" data-toggle="modal" data-target="#modal-default" onclick="jsSupplierList({{$list->product_id}},{{$list->id}})"><i class="fa fa-fw fa-plus" style="color: red;"></i></a><label id="pr_prd{{$list->id}}" style="color: green;">({{$supplier_count[$list->id]}})</label>
                    <!-- <button type="button" id="{{$list->product_id}}" data-toggle="modal" data-target="#modal-default" class="btn-danger addSup" style="background: transparent;border: none;"><i class="fa fa-fw fa-plus" style="color: red;"></i></button> -->
                      
                  </td>
                  <td class="center" style="width: 100px;"><a href="{{route('pr.mr.list.sea',$list->id)}}"><i class="fa fa-fw fa-list-alt"></i></a></td>
                  <td><button type="button" class="btn-danger delete_pdt" id="{{$list->id}}"><i class="fa fa-trash"></i></button></td>

                </tr>
                @endforeach
                @endif
              </tbody>
              <tfoot>
                  <tr>
                    <th colspan="10">
                <button type="button" class="btn btn-success pull-right" id="prsave">Generate PR</button>

                <button class="btn btn-alert pull-center" value="1" name="draft" id="prdraft">Save As Draft</button>

                <button type="button" class="export_excel btn btn-info pull-right" style="margin-right: 10px;">Download</button> 
                    </th>

                  </tr>
                </tfoot>
              </table>

              <!-- Download Excel --> 
              <div class="tbl" style="display: none;">
              <table id="table1" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                      <th>Sl No.</th>
                      <th>Product</th>
                      <th>Unit</th>
                      <th>Packing</th>
                      <th>Quantity</th>
                    </tr>
                    </thead>
                    <tbody>
                     <?php $c = 1; ?>
                    @if($purchase_products)
                     @foreach($purchase_products as $list)
                    <tr> 
                      <td>{{$c++}}</td>
                      <td>{{$list->product->name}}</td>
                      <td>{{$list->unit->unit}}</td>
                      <td> @if($list->grade != NULL){{$list->grade->grade}}@endif</td>
                      <td>{{$list->apr_qty}}</td>
                    </tr>
                    @endforeach
                    @endif
                  </tbody>
                  </table>
                 </div>

            </form>
            </div>
          </div>
            <!-- /.nav-tabs-custom -->

            <!-- Chat box -->
            
            <!-- /.box (chat box) -->

            
            <!-- quick email widget -->
          </section>
          <!-- /.Left col -->
          
        </div>
        <!-- /.row (main row) -->

      </section>
      <!-- /.content -->
    </div>
  <!-- /.content-wrapper -->
  

     <!-- Supplier Price List -->
      <div class="modal modal-info fade" id="modal-info">
        <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">Supplier Price List</h4>
                  </div>
                  <div class="modal-body">
                    <table  class="table table-bordered" id="priceList" >
                    <thead>
                         <tr>
                              <th>Sl No.</th>
                              <th>Supplier</th>
                              <th>Price</th>
                         </tr>
                    </thead>
                      
                     <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>  
                    </tbody>

                   </table>
                </div>
                 <div class="modal-footer">
              <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
  <!-- /.modal -->

       <!-- add supplier -->
      <div class="modal modal-default 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" id="title" style="display: inline;">Add Supplier :<b style="font-size: 15px;" id="shd"></b></h4>
                      <h5 style="display: inline;margin-left: 20%;"><strong>Apr.Qty: <strong id="apr_label">0</strong></strong></h5>
                      <h5 style="display: inline;margin-left: 20%;"><strong>Bal.Qty: <strong id="bal_label">0</strong></strong></h5>
                  </div>
                  <div class="modal-body">
                <form class="form-horizontal" action="{{route('grade_master.insert')}}" method="POST">
                <input type="hidden" name="_token" value="{{{ csrf_token() }}}">
                <input type="hidden" name="pr_prd_id" id="pr_prd_id">
                <input type="hidden" name="prd_shd_sea_id" id="prd_shd_sea_id">
                <input type="hidden" name="apr" id="apr">
              
                        <div class="box-body"><br>
                          <div class="form-group">

                            <label for="inputcategory" class="col-md-3 control-label">Supplier <i style="color: red">*</i></label>
                            <div class="col-md-8">
                              <select class="form-control" name="supplier" id="supplier">
                                <option value="">--select--</option>
                              </select>
                            </div>
                          </div>

                          <div class="form-group">
                            <label for="inputcategory" class="col-md-4 control-label">Qty <i style="color: red">*</i></label>
                            <div class="col-md-4">
                              <input type="number" name="qty" class="form-control" id="qty">
                            </div>/<label id="unit_label"></label>
                            <button type="button" class="btn btn-primary pull-right" id="add_btn">Add</button>
                          </div>
                        </div>
                        <!-- /.box-body -->
              
                      </form>
                 
                    <table  class="table table-bordered" id="supplierList">
                    <thead>
                         <tr> 
                              <th style='width:90px;'>S No.</th>
                              <th>Supplier</th>
                              <th>Month</th>
                              <th>Schedule</th>
                              <th>Eta</th>
                              <th>Apr. Qty</th>
                              <th>Req. Qty</th>
                              <th>Assg. dt</th>
                              <th>Price</th>
                              <th>Delete</th>
                         </tr>
                    </thead>
                      
                     <tbody>
                        <tr>
                           
                        </tr>  
                    </tbody>

                   </table>
                </div>
                 <div class="modal-footer">
              <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Close</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
  <!-- /.modal -->

  
  @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>
<!-- excel -->
<script src="{{asset('export/tableexport-xls-bold-headers.js')}}"></script>

<script type="text/javascript">

$(document).ready(function(){
  $(".export_excel").click(function(){
    $('.tbl').show();
    $('#table1').tableExport({
        type: 'excel',
        escape: 'false',
        filename: 'purchaserequestlist.xls',
    });
    $('.tbl').hide();

  });
});



function jsPriceList(pr_sea_pdt)
 {  
    $('#priceList tbody').empty();
    $('#priceList thead').empty();
   
   $.get("{{ url('load/supplier/price/list/sea')}}", 
        { pr_sea_pdt: pr_sea_pdt}, 
        function(data) {
          console.log(data);  
             var i = 1;
        $('#priceList thead').append("<tr><th style='width:90px;'>Sl No.</th><th>Supplier Name</th><th>Packing</th><th>Grade</th><th>Price</th></tr>");

        $.each(data, function(index, element) {
          var std = "-";
          var grade_name = "-";
          if(element.grade != null){
            var grade_name = element.grade;
          }

          if(element.standard != null){
            var std = element.standard;
          }
          
          $('#priceList tbody').append("<tr><td>" + i + "</td><td>" + element.name + "</td><td>" + grade_name + "</td><td>"+std+"</td><td>" + element.price+" "+element.currency+ "/" +element.unit+ "</td></tr>");
            i++;
        }); 
     });
 }

 function jsSupplierList(prd,pr_prd)
 {  
    var aprQty = $(".apr_qty"+pr_prd).val();
    $('#supplier').empty();
    $("#qty").val("");
    $('#supplierList thead').empty();
    $('#supplierList tbody').empty();
    $("#pr_prd_id").val(pr_prd);
    $("#apr").val(aprQty);

    $.get("{{ url('load/supplier/list/sea')}}", 
        { prd: prd,pr_prd_sea: pr_prd},
        function(data) {
          console.log(data[0]);
             var i = 1;

          $('#supplier').append("<option value=''>" + "--select--" + "</option>");
          $.each(data[0], function(index, element){
           var name = "-";
            if(element.grade != null){
               var name = '('+element.grade+')-';
            }
            if(element.grade != null){
               var standard = '('+element.standard+')-';
            }
            
            if(element.standard != null && element.grade != null){
              var name = element.standard+"-"+element.grade;
            }
             var currency = 'ee';
            $('#supplier').append("<option value='"+ element.id +"'>" + element.name + "("+name+ ")" + element.price+" "+element.currency+ "/" +element.unit+ "</option>");
          });

         $('#supplierList thead').append("<tr><th style='width:90px;'>Sl No.</th><th>Schedule</th><th>Supplier</th><th>Qty</th><th>Edit</th></tr>");
              $.each(data[3], function(index, element){
                if(element.name != null){
                  var name = element.name;
                }else{
                  var name = '';
                }
              if(element.status == 'G' ){
                $("#supplierList tbody").append("<tr><td>"+i+"</td><td>" + element.date + "</td><td>" + name + "</td><td>" + element.apr_qty + "</td><td><button type='button' class='btn btn-danger edit' id='"+element.id+"'><i class='fa fa-fw fa-edit'></button></td></tr>");

                i++;
              }else{
                 $("#supplierList tbody").append("<tr><td>"+i+"</td><td>" + element.date + "</td><td>" + name + "</td><td>" + element.apr_qty + "</td><td></td></tr>");
                i++; 
              }  
                
              });
              $("#apr_label").text(data[4]);
              $("#bal_label").text(data[5]);
              $(".total_qty").closest('tr').remove();
              // $("#supplierList tbody").append("<tr class='total_qty'><th></th><td class='pull-right'>Total:</td><td>"+supply[1]+"</td></tr>")
              
            
     });
 }

 //add btn

 $(document).on("click","#add_btn", function() {
    
    var qty = $("#qty").val();
    var pr_prd_id = $("#pr_prd_id").val();
    var sup_id = $("#supplier").val();
    var selected = $("#supplier option:selected").text();
    var explode = selected.split('(');
    var id = $("#prd_shd_sea_id").val();
  
    $.get("{{ url('update/sea/purchase/sup') }}",
      {sup_id:sup_id, qty: qty, id: id,pr_prd_id:pr_prd_id,sup:selected},
      function(data){
        console.log(data);
      if(data == 'Grater'){
         alert("Please confirm the quantity.");
      }else if(data == 'Add Price'){
        alert("kindly map Price");
      }else if(data == 'EXIST'){
        alert("PR already pending for the supplier");
      }
      else{
        $("#supplierList tbody").find('#'+id).closest('tr').find(' td:nth-child(3)').text(explode[0]);
       $("#supplierList tbody").find('#'+id).closest("tr").find("td:nth-child(4)").text(qty);
       $("#apr_label").text(data[1]);
       $("#"+pr_prd_id).closest('tr').find('td:nth-child(7)').text(data[2]);
       $("#bal_label").text(data[2]);
       $("#pr_prd"+pr_prd_id).replaceWith("<label id='pr_prd"+id+"' style='color;green'>("+data[3]+")</label>");
      }
       
      });
    $("#qty").val('');
    $("#supplier").val('');
 });



 //delete

 $(document).on("click",".delete", function() {
    var row = $(this);
    var id = $(this).attr('id');
    var pr_prd = $("#pr_prd_id").val();
    $.get("{{ url('delete/pr_suppliers') }}",
      {option : id},
      function(data){
        console.log(data);
        $(row).closest("tr").remove();

        var i = 1;
        $('#supplierList td:first-child').each(function() {
          $(this).text(i); 
          i++;
        });
        $("#pr_prd"+pr_prd).text('('+data[0]+')');
        $(".total_qty").closest('tr').remove();
        $("#supplierList tbody").append("<tr class='total_qty'><th></th><td class='pull-right'>Total:</td><td>"+data[1]+"</td></tr>");
      });
 });
 $(document).on("click",".edit", function() {
    var id = $(this).attr("id");
    var dt = $(this).closest("tr").find('td:nth-child(2)').text();
    $("#prd_shd_sea_id").val(id);
    $.get("{{ url('get/sea/purchase/details') }}",
      {option : id},
      function(data){
        $('#supplier').val(data.supplier_id);
        $('#qty').val(data.apr_qty);
        $('#shd').text(dt);
      });  
    
 });


 //save

 $(document).on("click","#prsave", function() {
    var pr_sea_id  = $("#purchase_request_sea_id").val();
    window.location = "{{URL::to('pr/generation/store')}}"+"/"+pr_sea_id;
    
 });

  $(document).ready(function() {
    $(document).on("click",".delete_pdt", function() {
      var id = $(this).attr("id");
     if(confirm("Are you sure you want to delete this?")){
       $(this).closest("tr").remove(); 
        $.get("{{url('delete/pr/sea/product')}}", {id:id},function(data){
         
          var i = 1;
              $('#example1 td:first-child').each(function() {
                $(this).text(i); 
                i++;  
              });
        });
     } 
      
    });
  });  


</script>
</body>

</html>
