@extends('dashboard.layout.partials.dashboard')

@section('content')
<style>
    select.form-control {
    padding: 0.4375rem 0.75rem;
    border: 0;
    outline: 1px solid #ebedf2;
    color: #221b1b;
    height: 45px;
}
.pagination {
    height: 26px;
    width: 100%;
    display: flex;
    justify-content: end;
}
.pagination a {
    text-decoration: none;
    color: #000;
}
</style>

<div class="container-fluid">
    
 <div class="stretch-card col-xl-12 mx-auto"> 
              
        <div class="card">
                  
                  <h4>Not Generated Qr-Code</h4>
                   <div style="text-align: right;">

                  	 	<a class="btn btn-secondary" href="{{url()->previous()}}">Back</a>
                  	
                  	 	</div> <br> 
                 
                  <div class="card-body shadow">
                    
                    
        <table class="table table-hover table-border table-stripped myTable">
            
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Product Code</th>
                    <th>Product Price</th>
                    
                </tr>
            </thead>
            <tbody>
               @foreach($notGenerated_qrCodes as $notGenerated_qrCodess) 
                <tr>
                <td>{{$notGenerated_qrCodess->product->product_name}}</td>
                <td>{{$notGenerated_qrCodess->product_code}}</td>
                <td><span class="badge badge-success">{{$notGenerated_qrCodess->product->price}}PKR</span></td>
                </tr>
                @endforeach
            </tbody>
        
        </table>    
        <div class='pagination'>
       {{ $notGenerated_qrCodes->links() }}
       </div>
                  </div>
                </div>
              </div>
          
 </div>

@endsection

@section('javascript')

<script>
	
    //data-table work
$(document).ready( function () {
    $('.myTable').DataTable({
        paging: false
    });
});
  
</script>

@endsection