{{-- QR 코드 (모바일 점검용) --}}
<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
    <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">QR 코드 (모바일 점검)</h2>
    <div class="flex items-start gap-6">
        <div>
            <div id="qr-code-container" class="bg-white p-2 border rounded-lg inline-block"></div>
        </div>
        <div class="flex-1">
            <p class="text-sm font-mono text-gray-700 mb-1">{{ $equipment->equipment_code }}</p>
            <p class="text-base font-semibold text-gray-900 mb-3">{{ $equipment->name }}</p>
            <p class="text-xs text-gray-500 mb-4 break-all" id="qr-url-text"></p>
            <div class="flex gap-2">
                <button onclick="downloadQrCode()" class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition">
                    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    PNG 다운로드
                </button>
                <button onclick="printQrCode()" class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">
                    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                    인쇄
                </button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<script>
(function() {
    const qrUrl = @json(\App\Services\QrCodeService::inspectionUrl($equipment->id));
    const equipCode = @json($equipment->equipment_code);
    const equipName = @json($equipment->name);

    document.getElementById('qr-url-text').textContent = qrUrl;

    new QRCode(document.getElementById('qr-code-container'), {
        text: qrUrl,
        width: 150,
        height: 150,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.M,
    });

    window.downloadQrCode = function() {
        const canvas = document.querySelector('#qr-code-container canvas');
        if (!canvas) return;

        canvas.toBlob(function(blob) {
            const a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = 'QR_' + equipCode + '.png';
            a.click();
            URL.revokeObjectURL(a.href);
        }, 'image/png');
    };

    window.printQrCode = function() {
        const canvas = document.querySelector('#qr-code-container canvas');
        if (!canvas) return;

        const dataUrl = canvas.toDataURL('image/png');
        const win = window.open('', '_blank', 'width=400,height=500');
        win.document.write(`<!DOCTYPE html><html><head><title>QR 코드 인쇄</title>
            <style>body{text-align:center;font-family:sans-serif;padding:20px}
            img{margin:20px auto}p{margin:8px 0}</style></head><body>
            <img src="${dataUrl}" width="200" height="200">
            <p style="font-weight:bold;font-size:16px">${equipCode}</p>
            <p style="font-size:14px">${equipName}</p>
            <p style="font-size:10px;color:#888">${qrUrl}</p>
            <script>window.onload=function(){window.print();}<\/script>
            </body></html>`);
        win.document.close();
    };
})();
</script>
