@slot('title','QRQODE ')
@slot('subtitle','per lokasi')
@slot('icon','detail')

<div>
    <style>
        @media print {
            body * {
                visibility: hidden;
            }
            .print-container, .print-container * {
                visibility: visible;
            }
            .print-container {
                width: 100%;
                height: 100%;
                display: flex;
                /* align-items: right; */ 
                /* justify-content: between; */
            }
            
            @page {
                size: 50mm 20mm;
                margin: 0;
            }
        }

        .text-sm {
            font-size: 8px;
            font-weight: bold;
            /* margin-top: 8px; */
            text-align: end;
            max-width: 200px;
           
        }
        
        .print-container {
            display: flex;
            justify-items: center;
            align-items: center;
        }
        
        .btn-print {
            margin-top: 20px;
            padding: 8px 20px;
        }
        
        .qr-with-logo {
            position: relative;
            display: inline-block;
        }
        
        .logo-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30px;
            height: 30px;
            background-color: white;
            border-radius: 8px;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
         
       
        
        .logo-overlay img {
            max-width: 100%;
            max-height: 100%;
        }
        
        .info-text {
            font-size: 10px;
            color: #666;
            margin-top: 5px;
            text-align: center;
        }
    </style>

    <div class="row">
        <div class="flex">
            @foreach ($allproduk as $p)
                @for ($i = 0; $i < $p->jumlah_awal; $i++)
                    <div class="card">
                        <div class="card-body">
                            <div class="print-container">
                                @php
                                    $tgl_kadaluarsa = ($p->tgl_kadaluarsa) ? $p->tgl_kadaluarsa->format('d F Y') : '-';
                                    $qrContent1 = $p->produk->nama_barang.' | '.$p->lokasi->nama_lokasi.' | '.$p->tgl_pembelian->format('d F Y').
                                                ' | '.$p->produk->merk.' | '.$p->produk->kategori->nama_kategori.
                                                ' | '.$p->jumlah_awal.' unit';
                                    $qrContent = url('/p/' . $p->id);
                                @endphp

                                <!-- QR Code -->
                                <div class="qr-with-logo">
                                    <img src="data:image/png;base64, {!! base64_encode(
                                        QrCode::format('png')
                                            ->size(70)
                                            ->margin(1)
                                            ->errorCorrection('H')
                                            ->generate($qrContent)
                                    ) !!}" alt="QR Code">
                                </div>

                                <!-- Info Text -->
                                <div class="flex text-sm justify-content-end">
                                    {{ $qrContent1 }}
                                </div>
                            </div>
                        </div>
                    </div>
                @endfor
            @endforeach

                    <div class="card-footer d-print-none d-flex justify-content-center">
                        <button class="btn btn-success btn-print" onclick="window.print()">
                            <i class="fa fa-print"></i> Print
                        </button>
                        
                    </div>
        </div>
    </div>
</div>

<script>
function testQRCode() {
    alert('Silakan scan QR code dengan aplikasi scanner untuk memastikan dapat terbaca dengan baik. Pastikan logo tidak menutupi bagian penting QR code.');
}
</script>