<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code for {{ item.name }} - LocalLendables</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .qr-display {
            text-align: center;
            background: white;
            border: 3px solid #28a745;
            border-radius: 15px;
            padding: 2rem;
            margin: 2rem 0;
        }
        
        .qr-code-container {
            background: white;
            padding: 1rem;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            display: inline-block;
        }
        
        .print-section {
            background: #f8f9fa;
            border: 2px dashed #6c757d;
            border-radius: 10px;
            padding: 2rem;
            margin: 2rem 0;
        }
        
        .instructions {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem;
            border-radius: 15px;
            margin: 2rem 0;
        }
        
        @media print {
            body * {
                visibility: hidden;
            }
            .print-section, .print-section * {
                visibility: visible;
            }
            .print-section {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                background: white;
                border: none;
                padding: 1rem;
            }
            .no-print {
                display: none;
            }
        }
        
        .step-card {
            border-left: 4px solid #28a745;
            transition: all 0.3s ease;
        }
        
        .step-card:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body class="bg-light">
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-success no-print">
        <div class="container">
            <a class="navbar-brand fw-bold" href="/dashboard/{{ currentUser.id }}">
                <i class="fas fa-leaf me-2"></i>LocalLendables
            </a>
            <div class="d-flex align-items-center text-white">
                <a href="/item/{{ item.id }}" class="btn btn-outline-light btn-sm me-2">
                    <i class="fas fa-eye me-1"></i>View Item
                </a>
                <a href="/dashboard/{{ currentUser.id }}" class="btn btn-outline-light btn-sm">
                    <i class="fas fa-home me-1"></i>Dashboard
                </a>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <!-- Header -->
        <div class="no-print mb-4">
            <h2>
                <i class="fas fa-qrcode me-2 text-primary"></i>QR Code Management
            </h2>
            <p class="text-muted">Generate and manage the permanent QR code for your item</p>
        </div>

        <!-- Instructions -->
        <div class="instructions no-print" data-help="qr-code-optional">
            <h4><i class="fas fa-lightbulb me-2"></i>How It Works</h4>
            <p class="mb-0">
                This QR code is the permanent digital passport for your item. Print it out and attach it securely to your item. 
                Anyone can scan it with their phone to see the item's current status, initiate borrowing, confirm pickup, or process returns - 
                just like scanning a FedEx package!
            </p>
        </div>

        <!-- QR Code Display -->
        <div class="row">
            <div class="col-md-6">
                <div class="qr-display">
                    <h5 class="mb-3">{{ item.name }}</h5>
                    <div class="qr-code-container" id="qrContainer">
                        <!-- QR Code will be generated here -->
                    </div>
                    <div class="mt-3">
                        <strong>QR Code:</strong> {{ qrData.qr_code }}<br>
                        <small class="text-muted">Scan to access: {{ printableQRUrl }}</small>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <!-- What this QR code enables -->
                <div class="card step-card mb-3">
                    <div class="card-body">
                        <h6><i class="fas fa-eye me-2 text-primary"></i>View Status</h6>
                        <small>Anyone can scan to see if the item is available, on loan, or being returned</small>
                    </div>
                </div>
                <div class="card step-card mb-3">
                    <div class="card-body">
                        <h6><i class="fas fa-handshake me-2 text-success"></i>Confirm Pickup</h6>
                        <small>Borrower scans to confirm they've received the item</small>
                    </div>
                </div>
                <div class="card step-card mb-3">
                    <div class="card-body">
                        <h6><i class="fas fa-undo me-2 text-warning"></i>Process Return</h6>
                        <small>Both parties can use QR to initiate and confirm returns</small>
                    </div>
                </div>
                <div class="card step-card mb-3">
                    <div class="card-body">
                        <h6><i class="fas fa-star me-2 text-info"></i>Automatic Points</h6>
                        <small>Points are automatically awarded when the lending cycle completes</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Print Section -->
        <div class="print-section">
            <div class="text-center">
                <h3>{{ item.name }}</h3>
                <p><strong>LocalLendables Community Item</strong></p>
                
                <div class="qr-code-container mx-auto" style="max-width: 300px;">
                    <div id="printQRContainer">
                        <!-- QR Code for printing -->
                    </div>
                </div>
                
                <div class="mt-3">
                    <p><strong>QR Code:</strong> {{ qrData.qr_code }}</p>
                    <p><strong>Scan to interact:</strong> {{ printableQRUrl }}</p>
                    <hr>
                    <p><small>
                        <i class="fas fa-mobile-alt me-1"></i>Scan with any smartphone camera<br>
                        <i class="fas fa-shield-alt me-1"></i>Secure LocalLendables platform<br>
                        <i class="fas fa-recycle me-1"></i>Sustainable community sharing
                    </small></p>
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div class="no-print text-center mb-4">
            <button class="btn btn-primary btn-lg me-2" data-help="qr-code-optional" onclick="window.print()">
                <i class="fas fa-print me-2"></i>Print QR Code Label
            </button>
            <button class="btn btn-success btn-lg me-2" onclick="downloadQR()">
                <i class="fas fa-download me-2"></i>Download QR Code
            </button>
            <a href="/qr/{{ qrData.qr_code }}" class="btn btn-info btn-lg" data-help="mobile-qr-scan" target="_blank">
                <i class="fas fa-eye me-2"></i>Preview QR Page
            </a>
        </div>

        <!-- Usage Instructions -->
        <div class="no-print">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>QR Code Usage Instructions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>For Item Owners:</h6>
                            <ul>
                                <li>Print and attach the QR code securely to your item</li>
                                <li>Consider laminating it for durability</li>
                                <li>Multiple copies can be printed as backups</li>
                                <li>The QR code never expires and is unique to this item</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6>For Borrowers:</h6>
                            <ul>
                                <li>Scan to see real-time availability</li>
                                <li>Confirm pickup by scanning when you receive the item</li>
                                <li>Initiate returns by scanning when ready to return</li>
                                <li>No app download required - works with any camera</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
    <script src="/js/contextual-help.js"></script>
    <script>
        let qrCanvas;
        
        async function generateQRCode() {
            const url = '{{ printableQRUrl }}';
            
            // Main display QR
            const container = document.getElementById('qrContainer');
            qrCanvas = document.createElement('canvas');
            await QRCode.toCanvas(qrCanvas, url, {
                width: 250,
                margin: 2,
                color: {
                    dark: '#000000',
                    light: '#FFFFFF'
                }
            });
            container.appendChild(qrCanvas);
            
            // Print version QR
            const printContainer = document.getElementById('printQRContainer');
            const printCanvas = document.createElement('canvas');
            await QRCode.toCanvas(printCanvas, url, {
                width: 300,
                margin: 3,
                color: {
                    dark: '#000000',
                    light: '#FFFFFF'
                }
            });
            printContainer.appendChild(printCanvas);
        }
        
        function downloadQR() {
            if (qrCanvas) {
                const link = document.createElement('a');
                link.download = '{{ item.name }}-QR-{{ qrData.qr_code }}.png';
                link.href = qrCanvas.toDataURL();
                link.click();
            }
        }
        
        // Generate QR codes when page loads
        document.addEventListener('DOMContentLoaded', generateQRCode);
    </script>
</body>
</html>