@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: 50%;
  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: 160px;
}
</style>
@endsection
@section('content')









<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Debit Note</h4>
        </div>
          <form action="{{ route('save.debit') }}" method="POST" name="add_forms">
            {{ csrf_field() }}
        <div class="modal-body">

         
          <div class="row">
          <div class="col-md-6">

            <h2>Add Dabit Note</h2>
                
       <p>Current Outstanding</p>
        <input type="text" class="search amountt-id"  id="the_input_id" autocomplete="off" readonly=""> 
    <p>Dabit Note amount</p>
    <input type="text" class="search" id="the_input_id1" autocomplete="off">
    <p>Total</p>
    <input type="text" class="search" id="total" name="total" autocomplete="off">

            <div >
              
            </div>
           
          </div>
          <div class="col-md-6">

            <h2>Remarks</h2>
             <textarea id="w3review" name="remarks" rows="10" cols="40" placeholder="Enter Remarks">
  
  </textarea>
            <div >
              
            </div>
           
          </div>
        </div>
          
         
        </div>
        <div class="modal-footer">
         
        <button type="submit" class="btn btn-primary">Submit</button>

      </form>
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        </div>

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



  <!-- Modal -->
  <div class="modal fade" id="myModal3" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Select Options</h4>
           <input type="hidden" id="shop-id" name="shopid">

               <input type="hidden" class="amount-id"    autocomplete="off"> 
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-4">
              <a href="" class="btn btn-success justforpopups"    data-toggle="modal" data-target="#myModal" data-dismiss="modal">Dabit Notes</a>
            </div>
            <div class="col-md-4">
               <a href="" class="btn btn-danger justforpopups"  data-toggle="modal" data-target="#myModal5" data-dismiss="modal">Credit Notes</a>
            </div>
            <div class="col-md-4">
              <button class="btn btn-primary freesamples ">Free Sampling</button>
                
            </div>
          </div>
         
        
        

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>






<div class="modal fade" id="myModal5" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Credit Note</h4>
        </div>
        <div class="modal-body">
             <div class="row">
          <div class="col-md-6">

            <h2>Add credit Note</h2>
                
       <p>Current Outstanding</p>
        <input type="text" class="search amountt-id"  id="the_input_id5" autocomplete="off" readonly=""> 
    <p>Credit Note amount</p>
    <input type="text" class="search" id="the_input_id15" autocomplete="off">
    <p>Total</p>
    <input type="text" class="search" id="total5" name="total" autocomplete="off">

            <div >
              
            </div>
           
          </div>
          <div class="col-md-6">

            <h2>Remarks</h2>
             <textarea id="w3review" name="remarks" rows="10" cols="40" placeholder="Enter Remarks">
  
  </textarea>
            <div >
              
            </div>
           
          </div>
        </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>





   
       
            <div class="panel panel-white">
              <div class="panel-body">

                <div class="table-responsive">



         
            
              
            <input  list="browsers"  type="text" class="form-control myInput search" placeholder="Search DSF" autocomplete="off" >
            <datalist id="browsers">
     @foreach($dsfs as $key=> $d)
     <option>{{$d->firstname}} {{$d->lastname}}</option>
     @endforeach
                </datalist>
                <input    type="text" class="form-control myInput search" placeholder="Search Shop" autocomplete="off" >

                


                    <table   class="sortable table table-bordered table-framed table-hover">
                        <thead>
                        <tr>
                               <th>#</th>
                               <th>DSF Name</th>
                               <th>Number</th>
                               <th>Shop Name</th> 
                               <th>Oppening Ballance</th>
                               <th>Balance</th>
                                <th>Debit Note</th>


                            
                            
                        </tr>
                        </thead>
                        <tbody id="myTable">
                        @foreach($allshop as $key=> $shop)
                        <tr>
                            <td>{{$no++}}</td>
                            <td>{{$shop->dsf_info->firstname}} {{$shop->dsf_info->lastname}}</td>
                            <td>{{$shop->phone}}</td>
                            <td>{{$shop->shop_name}}</td>
                            
                           
                            <td>{{$shop->oppening_balance}}</td>
                            <td>{{$shop->balance}}</td>
                          <td><a href="" class="btn btn-success justforpopup" amountid="{{$shop->balance}}"   shopid="{{$shop->id}}"  data-toggle="modal" data-target="#myModal3">Dabit/Credit/Notes/FS</a></td>
                         
                       
                        @endforeach

</tr>
                          

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

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


          <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">
      $(function() {

    $('#the_input_id').keyup(function() {  
        updateTotal();
    });
    
    $('#the_input_id1').keyup(function() {  
        updateTotal();
    });
    
    var updateTotal = function () {
      var input1 = parseInt($('#the_input_id').val());
      var input2 = parseInt($('#the_input_id1').val());
      if (isNaN(input1) || isNaN(input2)) {
          if(!input2){
              $('#total').val($('#the_input_id').val());
          }
          
          if(!input1){
                $('#total').val($('#the_input_id1').val());
          }
          
      } else {          
            $('#total').val(input1 + input2);
      }
    };

    var output_total = $('#total');

    var total = input1 + input2;

   output_total.val(total);

 });
    </script>


  <script type="text/javascript">
      $(function() {

    $('#the_input_id5').keyup(function() {  
        updateTotal();
    });
    
    $('#the_input_id15').keyup(function() {  
        updateTotal();
    });
    
    var updateTotal = function () {
      var input1 = parseInt($('#the_input_id5').val());
      var input2 = parseInt($('#the_input_id15').val());
      if (isNaN(input1) || isNaN(input2)) {
          if(!input2){
              $('#total5').val($('#the_input_id5').val());
          }
          
          if(!input1){
                $('#total5').val($('#the_input_id15').val());
          }
          
      } else {          
            $('#total5').val(input1 - input2);
      }
    };

    var output_total = $('#total5');

    var total = input1 - input2;

   output_total.val(total);

 });
    </script>



<script>
$(document).ready(function(){
  $(".justforpopup").click(function(){

     let shopsid = $(this).attr('shopid');

     let amount = $(this).attr('amountid'); 

    
     $('#shop-id').val(shopsid);
     $('.amount-id').val(amount);

     
    
  });
});
</script>


<script>
$(document).ready(function(){
  $(".justforpopups").click(function(){


    

      let shoppsid = $('#shop-id').val();

     

      let amounts = $('.amount-id').val(); 



    
     $('#shop-id').val(shoppsid);
     $('.amountt-id').val(amounts);
     
    
  });
});
</script>






<script>
$(document).ready(function(){
  $(".freesamples").click(function(){


   

      let shop_id = $('#shop-id').val();

     

 if(shop_id)
               {

              
                    
                  jQuery.ajax({

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

                    type: 'POST',

                    data: {shopid:shop_id},

                    dataType: 'JSON',

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

                     success:function(data)

                     {
                      
                        console.log(data);

                        var url = '/erp.biocospk.com/freesampleproducts/' + data;
                         window.location = url;
               

                     }

                  });
               }  

     
    
  });
});
</script>





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

@section('footer-content')
    
@endsection