<!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')}}">

  <!-- bootstrap datepicker -->
  <link rel="stylesheet" href="{{asset('lte/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css')}}">
  
  <link rel="stylesheet" href="{{asset('lte/plugins/timepicker/bootstrap-timepicker.min.css')}}">
  <!-- DataTables -->
  <link rel="stylesheet" href="{{asset('lte/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css')}}">

   <!-- Select2 -->
  <link rel="stylesheet" href="{{asset('lte/bower_components/select2/dist/css/select2.min.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>
          Credit Sales Order
        </h1>
        <ol class="breadcrumb">
          <li><a href="{{route('credit.sales.order.list')}}"><i class="fa fa-dashboard"></i> Credit Sales Order</a></li>
          <li class="active">Update</li>
        </ol>
      </section>

      <!-- 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 box-info">
            <div class="box-header with-border">
              @if(Session::has('exist'))
                <div class="alert alert-danger alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                Product Already Requested
              </div>
                @endif
              <div class="form-group col-md-3" style="display: inline;">
                <div class="input-group date ">
                  <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                  </div>
                  <div>
                  <input type="text" class="form-control pull-right" id="datepicker" value="{{date('d-F-Y')}}" disabled="">
                </div>
                </div>
                <!-- /.input group -->
              </div>
              <h3 style="display: inline;">{{$mr->materialRequest['request_no']}}</h3>
              
              
            </div>
            <!-- /.box-header -->
            <div class="box-body">

              <form role="form" action="{{route('credit.sale.product.update')}}" id="editform" method="POST">
                <input type="hidden" name="_token" value="{{{ csrf_token() }}}">
                <input type="hidden" name="x" value="{{$x}}">
                <input type="hidden" name="mr_id" value="{{$mr->id}}">
                        <!-- text input -->
                        <div class="col-sm-5">
                          <div class="form-group">
                            <label class="col-sm-2 control-label">Product<i style="color: red">*</i></label>

                            <div class="col-sm-9">
                              <select class="form-control select2" name="product" id="product" required>
                              <option value="">-- select --</option>
                              @foreach($product as $prd)
                              @if($mr->product_id == $prd->id)
                              <option value="{{$prd->id}}" selected="">{{$prd->name}} - {{$prd->code}}</option>
                              @else
                              <option value="{{$prd->id}}">{{$prd->name}} - {{$prd->code}}</option>
                              @endif
                              @endforeach
                            </select>
                            </div>
                          </div>
                          <br>
                          <br>
                          <div class="form-group">
                            <label class="col-sm-2 control-label">Packing <i style="color: red">*</i></label>

                            <div class="col-sm-9">
                              <select class="form-control" name="grade" id="grade" required>
                              <option value="">-- select --</option>
                              @foreach($grade as $grd)
                              @if($mr->grade_id == $grd->id)
                              <option value="{{$grd->id}}" selected="">{{$grd->grade}}</option>
                              @else
                              <option value="{{$grd->id}}">{{$grd->grade}}</option>
                              @endif
                              @endforeach
                            </select>
                            </div>
                          </div>
                          <br>
                          <br>
                          <div class="form-group">
                            <label class="col-sm-2 control-label">Unit<i style="color: red">*</i></label>

                            <div class="col-sm-9">
                              <select class="form-control" name="unit" id="unit" required>
                              <option>-- select --</option>
                              @foreach($unit as $u)
                              @if($mr->unit_id == $u->id)
                              <option value="{{$u->id}}" selected="">{{$u->unit}}</option>
                              @else
                              <option value="{{$u->id}}">{{$u->unit}}</option>
                              @endif
                              @endforeach
                            </select>
                            </div>
                          </div>
                          <br>
                          <br>
                          <div class="form-group">
                            <label class="col-sm-2 control-label">Quantity<i style="color: red">*</i></label>

                            <div class="col-sm-9">
                              <input type="number" name="qty" class="form-control" value="{{$mr->qty}}" required>
                            </div>
                          </div>
                          <br>
                          <br>
                          <div class="form-group col-sm-9 col-sm-push-7">
                            <button type="submit" class="btn btn-primary pull-left">Add</button>
                            <a href="{{route('material_request.index',$x)}}" class="btn btn-default">Refresh</a>
                          
                          </div>
                        </div>
                        </form>

              <form action="{{route('credit.sales.order.approved')}}" method="POST">
                <input type="hidden" name="_token" value="{{{ csrf_token() }}}">
                <input type="hidden" name="x" value="{{$x}}">
             
              <div class="col-sm-5">
              <div class="form-group">
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th style="width: 10px">#</th>
                    <th>Product</th>
                    <th>Packing</th>
                    <th>Unit</th>
                    <th>Qty</th>
                    <th>Date</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
                </thead>
                <tbody>
                  <?php $c = 1; ?>
                  @if($x != 0)
                  @foreach($products as $prd)
                    <tr id="{{$prd->id}}">
                      <td class="order">{{$c++}}</td>
                      <td>{{$prd->product['name']}}</td>
                      <td>{{$prd->grade['grade']}}</td>                      
                      <td>{{$prd->unit['unit']}}</td>
                      <td>{{$prd->qty}}</td>
                      <td>{{date('d-m-Y',strtotime($prd->materialRequest['request_date']))}}</td>
                      <td>
                        <a href="{{route('credit.sale.mr_product.edit',$prd->id)}}" ><i class='fa fa-fw fa-pencil'></i></a>
              
                      </td>
                      <td>
                        <a href="#" onclick="jsDelete({{$prd->id}})" class='btn-danger delete'><i class='fa fa-fw fa-trash'></i></a>
              
                      </td>
                    </tr>
                  @endforeach
                  @endif
                </tbody>
              </table>
            </div>
            <div class="form-group ">
              <div class="btn">
                <input type="submit" name="submit" value="Confrim">
              </div>
             <!--  <div class="btn">
                <input type="submit" name="submit" value="Draft">
              </div> -->
              
            </div>
          </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 -->
  
  @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>

<!-- bootstrap datepicker -->
<script src="{{asset('lte/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.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>

<!-- Select2 -->
<script src="{{asset('lte/bower_components/select2/dist/js/select2.full.min.js')}}"></script>
<script>
  $(function () {
    $('#example1').DataTable()
    $('.select2').select2()
  })
</script>

<!-- Page script -->
<script>
  

    //Date picker
    $('#datepicker').datepicker({
      autoclose: true
    })

    
</script>

<script type="text/javascript">
  $(document).ready(function(){
    $(".check").click(function(){

      if ($(this).prop("checked") == true) {
        
        var prod_id = $(this).val();
        var sup_id = $("#sup_id").val();
        
       $.get("{{ url('add/product')}}", 
              { product: prod_id,supplier: sup_id }, 
              function(data) {
              console.log(data);
            });         
      }
      
    });
  }); 
</script>

<script type="text/javascript">
  $(document).ready(function(){
    $(".check").click(function(){

      if ($(this).prop("checked") == false) {
        var prod_id = $(this).val();
        var sup_id = $("#sup_id").val();
        
       $.get("{{ url('update/product')}}", 
              { product: prod_id,supplier: sup_id }, 
              function(data) {
             
            });         
      }
      
    });
  }); 
</script>

<script type="text/javascript">
  jQuery("#category").change(function()
  {   
      var category = $("#category").val();

      $.get("{{url('mr_product/show')}}",
          {option: category},
          function(data){
            console.log(data);
            $("#product").empty();
            $("#product").append("<option value=''>"+"-- select --"+"</option>");
            $.each(data, function(index,element){
                $("#product").append("<option value='"+ element.id +"'>" +element.name+ "</option>");
            });
          });
  });
</script>

<script type="text/javascript">
  jQuery("#product").change(function()
  {
      var product = $(this).val();

      $.get("{{url('mr_unit/show')}}",
          {option: product},
          function(data){
            console.log(data);
            $("#unit").empty();
            $("#grade").empty();
            $("#unit").append("<option value=''>"+"-- select --"+"</option>");
            $.each(data[0], function(index,element){
                $("#unit").append("<option value='"+ element.id +"'>" +element.unit+ "</option>");
            });

            $("#grade").append("<option value=''>"+"-- select --"+"</option>");
            $.each(data[1], function(index,element){
                $("#grade").append("<option value='"+ element.id +"'>" +element.grade+ "</option>");
            });
          });
  });
</script>

<!-- <script type="text/javascript">
  jQuery("#unit").change(function()
  { 
      var unit = $(this).val();
      var product = $("#product").val();

      $.get("{{url('mr_grade/show')}}",
          {unit: unit, prd: product},
          function(data){
            console.log(data);
            $("#grade").empty();
            $("#grade").append("<option value=''>"+"-- select --"+"</option>");
            $.each(data, function(index,element){
                $("#grade").append("<option value='"+ element.id +"'>" +element.grade+ "</option>");
            });
          });
  });
</script> -->

<script type="text/javascript">
  function jsDelete(value)
  {   
    var r = confirm("Are you sure you want to delete this product?");
    if (r == true) {
      $.get("{{url('mr_product/delete')}}",
          {option: value},
          function(data){
            $('#'+value).remove();
            // $('a').closest('tr').remove();
            $('td.order').text(function (i) {
          return i + 1;
        });
          });
    }
     
  }
</script>

</body>

</html>
