@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;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</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..">
             <form action="{{ route('add.stockadustment') }}" method="POST"  enctype="multipart/form-data">
                               {{ csrf_field() }}

             
                                   <h3 align="center" style="color:green;">Products List <input type="file" name="image"></h3>



            


                    <table   class="sortable table table-bordered table-framed table-hover">
                      <h3 align="right">
                        <label class="switch">
                    <input type="checkbox" id="payMethod" value="{{$so_id->so_id}}" checked >

                    <span class="slider round"></span>
                            </label>
                      </h3>
                        <thead >
                        <tr>
                            <th>#</th>
                            <th>Product Name</th>
                            <th>Old Quintity</th>
                            <th>Current Quintity</th>
                            <th>Difference</th>


                             
                            
                            
                        </tr>
                        </thead>
                        <tbody id="myTable">
                        @foreach($allproducts as $key=> $sd)
                        <tr>
                            <td>{{$no++}}</td>
                            @if($sd->sub_product_exist == 1)

                           <td>  <a  data-toggle="modal"  data-target="#myModal"  class="justforpopup" key="{{$key}}"  bookingid="{{$sd->product_id}}">{{$sd->product->name}}</a></td>

                            @else
                            <td>{{$sd->product->name}}</td>
                            @endif
                            
                            <td>{{$sd->qty}}<input type="hidden" value="{{$sd->qty}}" name="oldqty[]"></td>
                           
                            
                           



                                                           <input type="hidden" value="{{$sd->so_id}}" id="soid" name="subdisid">
                              <input type="hidden" value="{{$sd->product_id}}" name="stockid[]">
                               

                              <td><input type="number" class="search" value=""  data-name="{{$key}}"   onkeyup="getvalue(this);" placeholder="Quintity" name="openqty[]" id="keyy{{$key}}" ></td>
                            <input type="hidden"  id="total{{$key}}" value="{{$sd->qty}}">
                           <td><input type="number" class="search" value="" placeholder="Difference" name="difference[]" id="balance{{$key}}" readonly="" ></td>
                           


                            
                          
                            
                            

                        
                        @endforeach

</tr>
                        
                      
                          

                        </tbody>
                        <tfoot>
                          <tr>
                            <td></td><td></td><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 type="text/javascript">
       function getvalue(ele) 
{        
   
  
 var key= $(ele).attr('data-name');

 var val = $(ele).val();




 if($('#total'+key).val() < 0){

 $('#balance'+key).val($('#total'+key).val() - val);


 }

 else{
   $('#balance'+key).val($('#total'+key).val() - val);
 }



     
   



if (val == 0) {

 $('#balance'+key).val(0);
  
}

      }

      </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('addsubstocks')}}",

                     success:function(data)

                     {

                        console.log(data);

                         



                        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('adjustment')}}",

                     success:function(data)

                     {

                      console.log(data);

                   


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

                            console.log(value);
                       
                    $('#keyy'+value.key).val(value.main); 
                    
                    $('#keyy'+value.key).keyup(); 
                    $('#keyy'+value.key).prop('readonly', true);


  
});

                        
                       
                       
                            

                      

                     }

                  });
                 
        
       

     

    });


 
});










</script>




<script type="text/javascript">
 

 $("#payMethod").change(function(){
    if($(this).prop("checked") == true){

        var so_id = $(this).val();

       

    }else{
      var so_id = $(this).val();
    }



 jQuery.ajax({

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

                    type: 'POST',

                      data: {
                        'id': so_id,
                        
                    },

                    dataType: 'JSON',

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

                     success:function(data)

                     {

                      console.log(data);

                   


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

                            console.log(value);
                       
                    $('#keyy'+value.key).val(value.main); 
                    
                    $('#keyy'+value.key).keyup(); 
                    $('#keyy'+value.key).prop('readonly', true);


  
});

                        
                       
                       
                            

                      

                     }

                  });
                 








}); 

</script>


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

@section('footer-content')
    
@endsection