@slot('title','QRQODE ')
@slot('subtitle',$produk->produk->nama_barang.' - '. $produk->lokasi->nama_lokasi)
@slot('icon','detail')
@php
    $tgl_kadaluarsa = ($produk->tgl_kadaluarsa) ? $produk->tgl_kadaluarsa->format('d F Y') : '-';
    $qrContent1 = $produk->produk->nama_barang.' | '.$produk->lokasi->nama_lokasi.' | '.$produk->tgl_pembelian->format('d F Y').
                ' | '.$produk->produk->merk.' | '.$produk->produk->kategori->nama_kategori.
                ' | '.$produk->jumlah_awal.' unit';
    $qrContent = url('/produk/' . $produk->id);
@endphp
<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="card">
            <div class="card-body">
                <div class="print-container ">
                    <!-- Menggunakan error correction tinggi dan ukuran logo kecil -->
                    <div class="qr-with-logo ">
                        <img src="data:image/png;base64, {!! base64_encode(
                            QrCode::format('png')
                                ->size(70)
                                ->margin(1)
                                ->errorCorrection('H')  // High error correction
                                ->generate($qrContent)
                        ) !!}" alt="QR Code">
                        
                       {{-- <div class="logo-overlay">
                            <img src="/logo.png" alt="Logo">
                      </div> --}}
                       
                    </div>
                    
                    <div class="flex text-sm justify-content-end">
                        {{ $qrContent1 }}
                    </div>
                    
                </div>
            </div>
            <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>
                
                <button class="btn btn-info btn-print ms-2" onclick="testQRCode()">
                    <i class="fa fa-test"></i> Test QR
                </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>