<!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">
  
</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>
          <small><a href="{{route('products.index')}}"><i class="fa fa-fw fa-backward"> </i>Back to List</a></small>
        </h1>
        <ol class="breadcrumb">
          <li><a href="{{route('products.index')}}"><i class="fa fa-dashboard"></i> Product</a></li>
          <li class="active">create</li>
        </ol>
      </section>

      <!-- Main content -->
       <div class="modal modal-default fade" id="modal-place">
          <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">New HSN Code</h4>
              </div>
            
              <div class="form-group">
                <div class="col-sm-3"></div>
                <div class="modal-body">
                  <div class="col-sm-1"></div>
                  <label class="col-sm-3 control-label">HSN Code<font color="red">*</font></label>
                  <div class="col-sm-5">
                    <input type="text" name="hsn" class="form-control" id="hsn" placeholder="Enter" required="">
                  </div>
                  <br>
                </div>
              </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 save" data-dismiss="modal">Save</button>
              </div>
            </div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal-dialog -->
        </div>
      <section class="content">
                 <!-- Add place modal -->
                   
        <!-- Main row -->
        <div class="row">
          <!-- Left col -->
          <section class="col-lg-12 connectedSortable">
            <!-- Custom tabs (Charts with tabs)-->
            <div class="nav-tabs-custom">
              <!-- Tabs within a box -->
              <ul class="nav nav-tabs pull-right">
                <li><a href="#grade_manager" data-toggle="tab">Product Spec</a></li>
                <li class="active"><a href="#product_detail" data-toggle="tab">Product Detail</a></li>
                <li class="pull-left header"><i class="fa fa-inbox"></i> Product</li>
              </ul>
              <div class="tab-content no-padding">
                <div class="tab-pane active" id="product_detail"  style="position: relative; height: 300px;">
                  <div class="box box-info">
                    <div class="box-header with-border">
                      <h3 class="box-title">Product Details</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                      <form role="form" id="product_detail_form" action="{{route('products.store')}}" method="POST">
                        
                        <div class="form-group col-sm-6">
                          <label>Category <span class="reqstar">*</span></label>
                          <select name="product_category" id="inputError" class="form-control" required>
                            <option value="">-- select --</option>
                            @foreach($categories as $category)
                            <option value="{{$category->id}}">{{$category->category}}</option>
                            @endforeach
                          </select>
                        </div>
                        <div class="form-group col-sm-6">
                          <label>Group <span class="reqstar">*</span></label>
                          <select name="product_group" id="inputError" class="form-control product_group" required>
                            <option value="">-- select --</option>
                            @foreach($group_masters as $group)
                            <option value="{{$group->id}}">{{$group->name}}</option>
                            @endforeach
                          </select>
                        </div>
                        <div class="form-group col-sm-6">
                          <label>Sub Group <span class="reqstar">*</span></label>
                          <select name="product_subgroup" id="inputError" class="form-control sub_group" required>
                            <option value="">-- select --</option>
                          </select>
                        </div>
                        <div class="form-group col-md-6">
                          <label>Name <span class="reqstar">*</span></label>
                          <input type="text" name="product_name" class="form-control" placeholder="Enter ..." required>
                        </div>
                        <div class="form-group col-md-6">
                          <label>Code <span class="reqstar">*</span></label>
                          <input type="text" name="product_code" class="form-control" placeholder="Enter ..." required>
                        </div>
                        <div class="form-group col-md-6">
                          <label>Alias Name <span class="reqstar">*</span></label>
                          <input type="text" name="alias_name" class="form-control" placeholder="Enter ..." >
                        </div>
                        
                        <div class="form-group col-md-6">
                          <label>Base Unit <span class="reqstar">*</span></label>
                          <select name="base_unit" id="base_unit" class="form-control" required>
                            <option value="">-- select --</option>
                            @foreach($units as $data)
                            <option value="{{$data->id}}">{{$data->unit}}</option>
                            @endforeach
                          </select>
                          
                        </div>
                        <div class="form-group col-md-6">
                          <label>Secondary Name </label><br>
                          <input type="text" name="secondry_name" style="border-top-width: 32.997;width: 470.99306px;height: 34.99306px;" placeholder="Enter ...">
                        </div>
                         <div class="form-group col-md-5">
                          <label>HSN Code <span class="reqstar">*</span></label>
                          <select name="hsn_code" id="hsn_code" class="form-control" required>
                            <option value="">-- select --</option>
                            @foreach($hsn_code as $hsn)
                            <option value="{{$hsn->id}}">{{$hsn->hsncode}}</option>
                            @endforeach
                          </select>
                          
                        </div>

                            <div class="col-md-1">
                              <div>
                              <br>
                              <i class="fa fa-plus-circle" aria-hidden="true" id="add" style="color:#3c8dbc;font-size:30px;position:relative;margin-top: 9px;" data-toggle="modal" data-target="#modal-place"></i>
                              </div>
                            </div>

                        <div class=" col-md-6" >
                          <label>Tax</label><br>
                          <input type="number" name="tax"  style="border-top-width: 32.997;width: 470.99306px;height: 34.99306px;" step=".01">
                        </div>
                        <br>

                        <div class="form-group col-md-6" style="padding-top: 5px;right: 476px;">
                          <label>Remarks <span></span></label>
                          <textarea name="remarks" class="form-control"></textarea>
                        </div>

                        <br>

                        <div class="form-group " style="padding-top: 10px;margin-right: 525px;margin-left: 18px;" >
                          
                            <input type="checkbox" name="is_active" value="Y" checked="checked"> <label>is Active</label> 
                          
                        </div>
                     
                    <!--     <div class="form-group col-sm-6 col-sm-push-4"> -->
                          <div class="form-group col-sm-6 ">
                        <button type="button" id="product_save" class="btn btn-primary">Save</button>
                        </div>
                      </form>
                    </div>
                    <!-- /.box-body -->    
                  </div>
                  <!-- /.box -->  
                </div>




                <input type="hidden" id="product_id" value="0" class="form-control" readonly>





                <div class="tab-pane" id="grade_manager" style="position: relative; height: 300px;">
                  <div class="box box-info">
                    
                    <!-- /.box-header -->
                    <div class="box-body">
                      <div class="callout callout-danger" style="display: none">
                        <h4>Please Enter Product Details!</h4>
                      </div>  
                      <form role="form" action="" method="POST">
                        <!-- text input -->
                        <div class="col-sm-6">
                          <div class="form-group">
                            <label>Product <span class="reqstar">*</span></label>
                            <label class="form-control"></label>
                          </div>
                          <div class="form-group">
                            <label>Unit <span class="reqstar">*</span></label>
                            <select name="p_unit" class="form-control" required>
                              <option value="">-- select --</option>
                            </select>
                          </div>
                          
                          <div class="form-group col-sm-9 col-sm-push-9">
                          <button type="submit" class="btn btn-primary">Save</button>
                          </div>
                        </div>
                        
                        <div class="col-sm-6">
                          <div class="form-group">
                              <!-- /.box-header -->
                              
                                <table class="table table-bordered">
                                  <tr>
                                    <th style="width: 10px">#</th>
                                    <th>Unit</th>
                                    <th style="width: 40px">Delete</th>
                                  </tr>
                                  <tr>
                                    <td>1.</td>
                                    <td></td>
                                    <td><i class="fa fa-fw fa-trash" style="color: RED;"></i></td>
                                  </tr>
                                </table>
                              
                              <!-- /.box-body -->
                              <div class="box-footer clearfix">
                                <ul class="pagination pagination-sm no-margin pull-right">
                                  <li><a href="#">&laquo;</a></li>
                                  <li><a href="#">1</a></li>
                                  <li><a href="#">2</a></li>
                                  <li><a href="#">3</a></li>
                                  <li><a href="#">&raquo;</a></li>
                                </ul>
                              </div>
                            
                          </div>
                        </div>
                        
                      </form>
                    </div>
                    <!-- /.box-body -->   

                    
                    <hr class="box box-info">


                    <div class="box-body">
                      <form role="form">
                        <!-- text input -->
                        <div class="col-sm-6">
                          <div class="form-group">
                            <label>Product <span class="reqstar">*</span></label>
                            <label class="form-control"></label>
                          </div>
                          <div class="form-group">
                            <label>Grade <span class="reqstar">*</span></label>
                            <select name="product_grade" class="form-control" required>
                              <option value="">-- select --</option>
                            </select>
                          </div>
                          <div class="form-group col-sm-9 col-sm-push-9">
                          <button type="submit" class="btn btn-primary">Save</button>
                          </div>
                        </div>
                        
                        <div class="col-sm-6">
                          <div class="form-group">
                              <!-- /.box-header -->
                              
                                <table class="table table-bordered">
                                  <tr>
                                    <th style="width: 10px">#</th>
                                    <th>Grade</th>
                                    <th style="width: 40px">Delete</th>
                                  </tr>
                                  <tr>
                                    <td>1.</td>
                                    <td>
                                      
                                    </td>
                                    <td><i class="fa fa-fw fa-trash" style="color: RED;"></i></td>
                                  </tr>
                                </table>
                              
                              <!-- /.box-body -->
                              
                            
                          </div>
                        </div>
                        
                      </form>
                    </div>
                    <!-- /.box-body --> 
                  </div>
                  <!-- /.box -->  
                </div>
              </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 -->
  
  <!-- /.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>
  
</body>
<script>
  $(document).ready(function(){
    $(".reqstar").css("color","red");
    $(".reqstar").css("font-size",14);
    
    //check the product details is entered first
    $("a").click(function(){
      if($(this).attr('href') == "#grade_manager"){
        if($("#product_id").val() == 0){
          $(".callout-danger").show();
        }
      }
    });

    $("#product_save").on('keydown click',function(e){
      var ept = 0;
      
      $("#product_detail_form .form-control").filter(function(){
        if($(this).val().length == 0 && (!$(this).is("textarea"))) {
          ept = ept + 1;
          $("#unit_div").addClass('has-error');
          $(this).parent('div').addClass('has-error');
        }
      });
      
      if(ept == 0)
      {
        $("#product_detail_form").submit();
      }
      
      
      
      
    });

    $(".product_group").change(function(){
      var grp = $(this).val();
      $(".sub_group").empty();
      $.post("{{url('get_sub_group')}}",{group: grp}, function(data){
        $(".sub_group").append(data);
      });
    });
  });

  $(".save").click(function(){
    var hsn = $('#hsn').val();
    if(hsn == ''){
      alert("Enter a valid hsn code.");
    }
    else{
        var eurl = "{{url('add/hsn/code')}}";
            $.get(eurl,{option1: hsn}, function(data){ 
              console.log(data);
            if(data == 0){
              alert("HSN Code allready added.")
            }
            else{
              $('#hsn_code').append('<option value="'+data.id+'">'+data.hsncode+'</option>');
              $('#hsn_code').val(data.id);}
            }); 
    }

  });
  $("#add").click(function(){
    $('#hsn').val('');
  });
</script>
</html>
