@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;
}
.table th img, .table td img {
    width: 100px;
    height: 100px;
    border-radius: 0%; 
}
.multiple_qr_code {
    width: 278px;
    height: auto;
}
form {
    /*text-align: center;*/
}

form input {
    margin-top: 18px;
}
.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"> <!--col-md-6 grid-margin -->
        <div class="card">
                  <h4>Generated Qr-Code</h4>
                  <div style="text-align: right;">
                  	 	<a class="btn btn-secondary" href="{{url()->previous()}}">Back</a>
                  	
                  	 	</div>
                  	 	<br> 
    @error('option1')
    <div class="alert alert-danger">{{ $message }}</div>
    @enderror
    @if(session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
    @endif
    
       <div class="card-body shadow">
          
        <form method='post' action='{{route("downloadMultipleQrcode")}}'> 
        @csrf
        @if(count($generated_qrCodes) > 0)
        <button class='btn btn-success multiple_qr_code mb-4' type='submit'>Download Multiple QR Codes</button>
        @endif
        <table class="table table-hover table-border table-stripped myTable">
            
            <thead>
                <tr>
                    <th>S no</th>
                    <th>Check</th>
                    <th>Product</th>
                    <th>Product Code</th>
                    <th>Product Price </th>
                    <th>QR Code Image</th>
                    <th>Download QR Code</th>
                    
                </tr>
            </thead>
            <tbody>
               
               @foreach($generated_qrCodes as $generated_qrCodess) 
                @php
                $qrCode = QrCode::format('png')->size(300)->generate($generated_qrCodess->product_code);
                @endphp
                <tr>
                <td>{{$loop->index+1}}</td>    
                <td><input type="checkbox" id="myCheckbox"  name="option1[]" value="{{$generated_qrCodess->product_code}}"></td>
                <td>{{$generated_qrCodess->product->product_name}}</td>
                <td>{{$generated_qrCodess->product_code}}</td>
                <td><span class="badge badge-success">{{$generated_qrCodess->product->price}}PKR</span></td>
                <td><img src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->size(200)->generate($generated_qrCodess->id)) !!}"></td>  
                <td><span><a href='{{route("downloadSingleQrCode",[$generated_qrCodess->id])}}' class='btn btn-success'>Download</a></span></td>
                </tr>
                @endforeach
            </tbody>
        </table>
         <div class='pagination'>
       {{ $generated_qrCodes->links() }}
       </div>
        <form>
                  </div>
                </div>
              </div>
          
 </div>

@endsection

@section('javascript')

<script>
	
   $(document).ready( function () {
    $('.myTable').DataTable({
        paging: false
    });
});
     

</script>

@endsection