<!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">

  <!-- DataTables -->
  <link rel="stylesheet" href="{{asset('lte/bower_components/datatables.net-bs/css/dataTables.bootstrap.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>
          Products
        </h1>
        <br>  
        <h4 style="font-weight: bold;margin-left: -15px;" class="col-sm-2 pull-left">MR No. : &nbsp;{{$m_r->prefix ?? ''}}{{$m_r->request_no ?? ''}} </h4>
        <h5 class=" col-sm-2 pull-right" style="margin-right: -19px;">Request Date: {{date('d-m-Y',strtotime($m_r->request_date))}}</h5>
        <ol class="breadcrumb">
         
          <li><a href="{{route('cash.sales.order.list')}}"><i class="fa fa-dashboard"></i> Cash Sales Order</a></li>
          <li class="active">view</li>
        </ol>
      </section>
     
      <!-- Main content -->
      <section class="content">
        
        <!-- Main row -->
        <div class="row">

          <!-- Left col -->
          <section class="col-lg-12 connectedSortable">

           <form class="form-horizontal" onsubmit="return submitForm(this);"  action="{{route('cash.sales.order.approved')}}" method="POST">
            <div class="nav-tabs-custom">
              <div class="tab-content no-padding">
                <div class="box box-info">
              
            
                  <input type="hidden" name="_token" value="{{{ csrf_token() }}}">
                  <input type="hidden" name="id" id="id" value="{{$m_r->id}}">
                  <div class="box-body">
                  <br>
                    <div class="form-group col-md-6">
                      <label for="inputcategory" class="col-sm-4 control-label">Invoice Amount <i style="color: red">*</i></label>
                      <div class="col-sm-6">
                        <input type="number" class="form-control" id="invoice_amount" name="invoice_amount" placeholder="Enter" autofocus="" value="{{$m_r->invoice_amount}}" step="00.001" required>
                      </div>
                    </div>

                    <div class="form-group col-md-6">
                      <label for="inputcategory" class="col-sm-4 control-label">Discount Amount </label>
                      <div class="col-sm-6">
                        <input type="number" class="form-control" id="discount_amount" name="discount_amount" placeholder="Enter" value="{{$m_r->discount_amount}}" step="00.001"  >
                      </div>
                    </div>

                    <div class="form-group col-md-6">
                      <label for="inputcategory" class="col-sm-4 control-label">Paid Amount <i style="color: red">*</i></label>
                      <div class="col-sm-6">
                        <input type="number" class="form-control" id="paid_amount" name="paid_amount" placeholder="Enter" value="{{$m_r->paid_amount}}" step="00.01"  required>
                      </div>
                    </div>

                    <div class="form-group col-md-6">
                      <label for="inputcategory" class="col-sm-4 control-label">Balance Amount </label>
                      <div class="col-sm-6">
                        <input type="hidden" class="form-control" id="balance_amount" name="balance_amount" placeholder="Enter" value="{{$m_r->balance_amount}}" step="00.001"  >
                        <label id="balance_amounts" style="margin-top: 2px;font-size: 50px;" >{{$m_r->balance_amount}}</label>

                      </div>
                    </div>


                  </div>
                    <div  class="form-group col-md-6" style="margin-left: 0px;right:px;left: 107px;">
                      <label style="margin-left: 12%;">
                        <input type="radio" name="cash_mode" class="minimal-red" value="cash" checked>Cash
                      </label>&nbsp;&nbsp;&nbsp;&nbsp;
                      <label>
                        <input type="radio" name="cash_mode" class="minimal-red" value="card">Card
                      </label>
                    </div>
                    <br>
                    <br>
                    

                 
            </div>
          
          </div>
          </div>
            <!-- Custom tabs (Charts with tabs)-->

          <div class="box">
            
            <!-- /.box-header -->
            <div class="box-body">
              <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>Unit Price</th>
                    <th>Tax Percentage</th>
                    <th>Tax Amount</th>
                    <th>Total Amount</th>
                    <th>Remarks</th>
                    
                </tr>
                </thead>
                <tbody>
                  <?php $c = 1; $tot =0; ?>
            
                  @foreach($products as $prd)
                    <tr id="row{{$prd->id}}">
                      <td>{{$c++}}</td>
                      <td>{{$prd->product['name']}}
                        <input type="hidden" name="product_id[]" value="{{$prd->id}}"></td>
                      <td>{{$prd->grade['grade']}}</td>
                      <td>{{$prd->unit['unit']}}</td>
                      <td><input type="number" name="qty[]" class="qty" id="qty" value="{{$prd->qty}}"></td>
                      <td><input type="number" name="price[]" class="price" id="price" value="{{$prd->price}}" step="0.001"></td>
                      <td>{{$prd->tax_percentage ?? 0.00}}<input type="hidden" name="tax[]" class="tax" id="tax" value="{{$prd->tax_percentage}}" step="0.01"></td>
                      <td><input type="text" name="tax_val[]" id="tax_val" class="tax_val" value="{{$prd->tax_amount}}" style="  border-left-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-top-width: 0px;padding-right: 0px;padding-left: 0px;padding-top: 0px;padding-bottom: 0px;width: 100px;"></td>
                      <td><input type="text" name="total_amount[]" id="total_amount" class="total_amount" value="{{$prd->total_amount}}" readonly="" style="  border-left-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-top-width: 0px;padding-right: 0px;padding-left: 0px;padding-top: 0px;padding-bottom: 0px;width: 100px;"></td>
                      <td>{{$prd->remarks}}</td>
                      <?php $tot = ($prd->total_amount) + $tot ; ?>
                    </tr>
                  @endforeach
                 
                </tbody>
              </table>

                      <input type="hidden" name="tot_price" id="tot_price" value="{{$tot}}">
            </div>
          </div>

         <!-- /.box-body -->
                  <div class="box-footer">
                    <button type="submit" name="save" value="draft" class="btn btn-primary" style="margin-right: 10px;">Draft</button>
                    <button type="submit" name="save" value="save" class="btn btn-primary" style="margin-right: 10px;">Confrim</button>
                  </div>
                  <!-- /.box-footer -->
                </form>
          </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>

  <!--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>

<script type="text/javascript">
  $(function () {
    $('#example1').DataTable()
    
  })


 function submitForm(data) {
    return confirm('Are You Sure?');
  }
</script>


<script>
  $(document).ready(function(){
    var tot_price = $('#tot_price').val();
    $('#invoice_amount').val(tot_price);
  });

  

    $( document ).ready(function() {
     $('.qty').each(function () {
        $(".qty").trigger("blur");
      });
    $('#discount_amount').on('blur', function(){

      $("#paid_amount").trigger("blur");
    });
    $('#invoice_amount').on('blur', function(){

      $("#paid_amount").trigger("blur");
    });
    
    $('#paid_amount').on('blur', function(){
      
    var invoice_amount = $('#invoice_amount').val();

    var discount_amount = $('#discount_amount').val();

    var amount = invoice_amount - discount_amount ;

    var paid_amount = $('#paid_amount').val();

    var balance_amount = paid_amount - amount ;

      if(balance_amount > 0)
      {
      $('#balance_amounts').text(balance_amount);
      }
      else
      {
      $('#balance_amounts').text(0);

      }
    });
});


    
    $(document).on("blur",".price", function() {

  
      var ths        = $(this);
      var price_val    = $(this).val();


      var tax_val   = ths.closest('tr').find('td:nth-child(7) .tax').val();

      var qty_avl   = ths.closest('tr').find('td:nth-child(5) .qty').val();
      var total_price =  parseFloat(qty_avl) * parseFloat(price_val);
      // var amount_with_tax =  parseFloat(total_price) * (parseFloat(tax_val) / 100 );
      if (tax_val !='') {
        
         var amount_with_tax =  parseFloat(total_price) * (parseFloat(tax_val) / 100 );
      }
      else
      {
         var amount_with_tax = 0;
      }
      var total_amount = parseFloat(amount_with_tax) + parseFloat(total_price);

      ths.closest('tr').find('td:nth-child(8) .tax_val').val(amount_with_tax);
      ths.closest('tr').find('td:nth-child(9) .total_amount').val(total_amount);
      // ths.closest('tr').find('td:nth-child(8)').text(amount_with_tax);
      // ths.closest('tr').find('td:nth-child(9)').text(total_amount);
     var total_val = 0;
      $('.total_amount').each(function () {
        var value = $(this).val();
        total_val = parseFloat(total_val) + parseFloat(value);
      });

    $('#invoice_amount').val(total_val);


    });

   
    $(document).on("blur",".qty", function() {

  
      var ths        = $(this);
      var qty_avl    = $(this).val();


      var tax_val   = ths.closest('tr').find('td:nth-child(7) .tax').val();

      var price_val   = ths.closest('tr').find('td:nth-child(6) .price').val();
      var total_price =  parseFloat(qty_avl) * parseFloat(price_val);
      if (tax_val !='') {
        
         var amount_with_tax =  parseFloat(total_price) * (parseFloat(tax_val) / 100 );
      }
      else
      {
         var amount_with_tax = 0;
      }

      var total_amount = parseFloat(amount_with_tax) + parseFloat(total_price);
      ths.closest('tr').find('td:nth-child(8) .tax_val').val(amount_with_tax);
      ths.closest('tr').find('td:nth-child(9) .total_amount').val(total_amount);

      var total_val = 0;
      $('.total_amount').each(function () {
        var value = $(this).val();
        total_val = parseFloat(total_val) + parseFloat(value);
      });
    $('#invoice_amount').val(total_val);
      

    });
</script>


</html>
