@extends('layouts.admin')
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
@section('header-content')
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>

</style>
  <meta name="csrf-token" content="{{csrf_token()}}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style> 
* { font-family:Arial; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }

select { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }
input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }
</style>
</style>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
@endsection
@section('content')

<!-- Modal -->
<div class="modal fade" id="bsModal3" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="mySmallModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <table id=datas>
          
        </table>
         
   
  </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<form action="{{ route('subproduct.store') }}" method="POST" name="add_forms">
                            {{ csrf_field() }}
<div class="card">
<div class="row">
    <div class="col-md-12">
        <div class="form-group"> 
             <strong><h2 align="center" style="color: Green">Products COD Rate</h2></strong>
    
   <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>#</th>
                            <th>Products</th>

                            <th>Quintity</th>
                            <th>Product Price</th>
                            <th>Before Discount</th>
                            <th>Discount</th>
                            <th>After Discount</th>
                            <th>Delete</th>
                                    
                                    
                                </tr>
                            </thead>
                            <tbody class="neworderbody">
                              
                            <tfoot><td>-</td>
                               <td style="color: green">Total Quantity</td><td> <input type="text" id="totalamount" name="totalamountsubproducts" value="{{$orderpayment->payment}}" readonly=""></b></td>
                               <td></td>
                            </tfoot>
                            </table>
                                
                        <input type="button" class="btn btn-lg btn-primary add" value="Add New Item">
                        <hr>

                         


</div>
</div>
</div>
</div>
</form>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">
    function totalAmount(){
        var t = 0;
        var w = 0;
        $('.amount').each(function(i,e){
            var amt = $(this).val()-0;
            t += amt;


        });

         $('.weight').each(function(i,e){
      var wt = $(this).val()-0;
      w += wt;
      
    });
        $('.pt_price').val(t);
        $('.p_weight').val(w);


        var bundle_price  = $('.bt_price').val();
        var bundle_weight  = $('.b_weight').val();

        //alert(bundle_price);
          p = Number(bundle_price) + Number(t);
        $('.sum').val(p);
        bww = Number(bundle_weight) + Number(w);
        $('.sum1').val(bww);
        $('.total').html(t);
         
    }
    $(function () {
        $('.getmoney').change(function(){
            var total = $('.total').html();
            var getmoney = $(this).val();
            var t = getmoney - total;
            $('.backmoney').val(t).toFixed(2);
        });
        $('.add').click(function () {
            var product = $('.product_id').html();
            var n = ($('.neworderbody tr').length - 0) + 1;
            var tr = '<tr><td class="no">' + n + '</td>' +  '<td><select class=" product_id " name="product_id[]" ><option value="volvo" >Select Product</option>@foreach($orderproducts as $key=> $product)<option value="{{$product->id}}" data-price="{!! $product->distributor_price !!}"> {{$product->name}}</option>@endforeach</select></td>' +
                '<td><input type="text" data-name="{{$key}}"   onkeyup="getvalue(this);" id="value1" value="" ></td>' +
                '<td><input type="text" class="price"   id="price{{$key}}" value="" ></td>' +
                '<td><input id="totalPrice{{$key}}" type="text" value="" name=""></td>' +
                '<td><input type="text" id="discount{{$key}}" value="" name=""></td>' +
                '<td><input type="text"  value="" class="amount" id="afterdiscount{{$key}}"  value="" readonly="" ></td>' +
                '<td><input type="button" class="btn btn-danger delete" value="xRemove"></td></tr>';
            $('.neworderbody').append(tr);
        });
        $('.neworderbody').delegate('.delete', 'click', function () {
            $(this).parent().parent().remove();
            totalAmount();
        });


        $('.neworderbody').delegate('.product_id', 'change', function () {
//alert(1212);
              var countryID = jQuery(this).val();

                 if(countryID)
               {
                  jQuery.ajax({

                     headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

                    type: 'POST',

                    data: {message:countryID},

                    dataType: 'JSON',

                    url: "{{route('maan')}}",

                     success:function(data)

                     {

                        console.log(data);

                        // jQuery('select[name="state"]').empty();

                        //   $('select[name="state"]').append('<option value="">select</option>');
                            

                        jQuery.each(data, function(key,value){
                                 $("#bsModal3").modal('show'); 
                                 $('#datas').append('<tr><td>'+ value +'</td><td><input type="text" class="form-control" placeholder="Enter Quantity"></td><tr>');

                        });

                     }

                  });
               }  





            var tr = $(this).parent().parent();
                    var price = tr.find('.product_id option:selected').attr('data-price');
            tr.find('.price').val(price);
//              var weight = tr.find('.product_id     option:selected').attr('data-weight');

//             tr.find('.weight').val(weight);

          
//             var qty = tr.find('.qty').val() - 0;
//             var dis = tr.find('.dis').val() - 0;
//             var price = tr.find('.price').val() - 0;
 
// if(qty != 0){
// tr.find('.weight').val(weight*qty);
// }
//        // 
//             var total = (qty * price) - (dis);
//             tr.find('.amount').val(total);
//             totalAmount();
//         });

//         $('.neworderbody').delegate('.qty , .dis', 'keyup', function () {
//             var realweight = 0;
//             var tr = $(this).parent().parent();
//             var qty = tr.find('.qty').val() - 0;
//             var dis = tr.find('.dis').val() - 0;
//             var price = tr.find('.price').val() - 0;
           
//            // alert(1234);
//             if (realweight == 0){
//               var realweight = tr.find('.product_id option:selected').attr('data-weight');
               
//             }
//           if(qty == 0){
//          var weight = tr.find('.product_id option:selected').attr('data-weight');
//         // alert(weight);
//     tr.find('.weight').val(weight);
//     }else{

   
//     var totalweight = (qty * realweight);
   
//      tr.find('.weight').val(totalweight);
//     }
        
       
//             var total = (qty * price) - (dis * qty);
//             tr.find('.amount').val(total);
//             totalAmount();
//         });
        
//         $('#hideshow').on('click', function(event) {  
//              $('#content').removeClass('hidden');
//             $('#content').addClass('show'); 
//              $('#content').toggle('show');
         });
    

        
    });
</script>

   <script type="text/javascript">
      function getvalue(ele) 
{
        var key= $(ele).attr('data-name');
        
         var priceindex = $('#price'+key).val();
         var discounts = $('#discount'+key).val();

        var perinput = $(ele).val();
      var result = (perinput*priceindex);
        
        var dis = (result/100);
         discouuntamount = (dis*discounts) ;
         afterdiscount = (result-discouuntamount);
         
           $('#afterdiscount'+key).val(afterdiscount);
        $('#totalPrice'+key).val(result);


       var test_qty = 0
      $('.amount').each(function() { 
    test_qty -=parseInt($(this).val(), 10)  
})
      $('#totalamount').val(test_qty); 


}


</script>
<script type="text/javascript">
 jQuery(document).ready(function ()
    {
      alert(2323);
            
                }
</script>




         




        <!-- /bordered panel body table -->
@endsection

@section('footer-content')
    
@endsection