@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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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> 
input[type=number] {
  width: 60%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
</style>
<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;
}
.search{
    border: 1px solid black;
    border-radius: 10px;
    font-size: 16px;
    padding: 5px;width: 300px;
    height: 40px;
}
</style>
@endsection
@section('content')
  
<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">Sub products</h4>
      </div>
     
      <div class="modal-body">
        <input type="hidden" name="" value="" id="bookings-id">
          <input type="hidden" name="" value=" " id="key">
          <input type="hidden" name="" value=" " id="so">

                            
        <div id=datas>
         
        </div>

         
   <button type="submit" class="btn btn-primary" id="addss"  data-dismiss="modal" >Add</button>
  </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        
        
   
      </div>
    </div>
  </div>
   
       
            <div class="panel panel-white">
              <div class="panel-body">
                <div class="table-responsive">




 
         
            
              
             <input id="myInput" class="search"   type="text" placeholder="Search..">
             
                                   <h3 align="center" style="color:green;">Products List</h3>
            


                    <table   class="sortable table table-bordered table-framed table-hover">
                        <thead >
                        <tr>
                            <th>#</th>
                            <th>Product name</th>
                            
                            
                            <th>Quintity</th>
                           
                             
                            
                            
                        </tr>
                        </thead>
                        <tbody id="myTable">
                        @foreach($freeproducts as $key=> $sd)
                        <tr>
                          
                          <td>{{$no++}}</td> 

                          @if($sd->ProductCategory)
                            <td>{{$sd->name}}</td> 
                          @else
                         <td>44</td>
                           @endif
                          <td><input type="number" class="search" name="" placeholder="Enter Quintity "></td>
                            

                        
                        @endforeach

</tr>
                        
                      
                          

                        </tbody>
                        <tfoot>
                          <tr>
                            <td></td><td></td><td><div align="right" >
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div></td>
                          </tr>
                        </tfoot>
                       
                    </table>
                   

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

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".justforpopup").click(function(){

     let bookingsid = $(this).attr('bookingid');

     var so_id = $("#soid").val();



     var key = $(this).attr('key');
  
     $('#bookings-id').val(bookingsid);
     $('#key').val(key);
     $('#so').val(so_id);





        if(bookingsid && key)
               {


                  jQuery.ajax({

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

                    type: 'POST',

                    data: {mainproductid:bookingsid,keyid:key},

                    dataType: 'JSON',

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

                     success:function(data)

                     {

                        console.log(data);

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

                        jQuery.each(data, function(key,value){
                                
                                
                                 $("#bsModal3").modal('show'); 
                                 $('#datas').append('<tr><td>"'+value.name+'"</td><td><input type="hidden" class="form-control getid"  name = "id[]" value= "'+value.id+'"></td><td><input type="text" class="form-control idproduct "  name = "qtysubs[]" value= ""   ></td><tr>');


                                 $('#bsModal3').on('hidden.bs.modal', function (e) {
                                  $("#datas").empty();
})

                        });
                           
                          
                     }

                  });
               }  

         else

               {
                  
                   $("#datas").empty();

               }





     
    
  });
});
</script>


          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function () {
            $("#reset").click(function (e) {
                location.reload();
            });

            $('#table1').DataTable({
  "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]

});


          

           
        });
    </script>



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

    var   keyindex = $("#key").val();

    var    mainproductid  =  $("#bookings-id").val();

    var so_id = $("#so").val();

    

           var ids = $('.getid').map(function(){ 
                    return this.value; 
                }).get();
 
         
           var subqty = $('.idproduct').map(function(){ 
                    return this.value; 
                }).get();


            
                  jQuery.ajax({

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

                    type: 'POST',

                      data: {
                        'id[]': ids,
                        'qty[]':subqty,
                        'keyindex':keyindex,
                        'mainproductid':mainproductid,
                        'sub_id':so_id,
                    },

                    dataType: 'JSON',

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

                     success:function(data)

                     {

                      console.log(data);

                   


                      jQuery.each(data, function(key,value){
                            

                            console.log(value);
                       
                    $('#keyy'+value.main).val(value.key); 
                   



  
});

                        
                       
                       
                            

                      

                     }

                  });
                 
        
       

     

    });


 
});

</script>



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

@section('footer-content')
    
@endsection