<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ item.name }} - LocalLendables</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .qr-processor-container {
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .qr-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
            max-width: 500px;
            width: 100%;
        }
        
        .item-header {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            padding: 30px 20px;
            text-align: center;
        }
        
        .item-image {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid white;
            margin-bottom: 15px;
        }
        
        .item-name {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .owner-info {
            font-size: 0.9rem;
            opacity: 0.9;
        }
        
        .content-section {
            padding: 30px;
        }
        
        .action-button {
            width: 100%;
            padding: 15px;
            font-size: 1.1rem;
            font-weight: bold;
            border: none;
            border-radius: 10px;
            margin: 10px 0;
            transition: all 0.3s ease;
        }
        
        .btn-pickup {
            background: #4CAF50;
            color: white;
        }
        
        .btn-pickup:hover {
            background: #45a049;
            transform: translateY(-2px);
        }
        
        .btn-return {
            background: #FF9800;
            color: white;
        }
        
        .btn-return:hover {
            background: #e68900;
            transform: translateY(-2px);
        }
        
        .btn-confirm-return {
            background: #2196F3;
            color: white;
        }
        
        .btn-confirm-return:hover {
            background: #1976D2;
            transform: translateY(-2px);
        }
        
        .btn-login {
            background: #9C27B0;
            color: white;
        }
        
        .btn-login:hover {
            background: #7B1FA2;
            transform: translateY(-2px);
        }
        
        .status-badge {
            display: inline-block;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
            margin-bottom: 20px;
        }
        
        .status-approved {
            background: #E8F5E8;
            color: #2E7D2E;
        }
        
        .status-active {
            background: #FFF3CD;
            color: #856404;
        }
        
        .status-return-requested {
            background: #D1ECF1;
            color: #0C5460;
        }
        
        .login-prompt {
            text-align: center;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        
        .alert-success, .alert-danger {
            border-radius: 10px;
            margin-bottom: 20px;
        }
        
        .logo {
            width: 60px;
            height: 60px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="qr-processor-container">
        <div class="qr-card">
            <!-- Item Header -->
            <div class="item-header">
                <img src="/lendable_items/{{ item.primaryLogo ?: 'default-placeholder.jpg' }}" 
                     alt="{{ item.name }}" class="item-image"
                     onerror="this.src='/lendable_items/default-placeholder.jpg'">
                <div class="item-name">{{ item.name }}</div>
                <div class="owner-info">
                    Belongs to {{ ownerDisplayName }}<br>
                    {% if ownerPhone %}{{ ownerPhone }}{% endif %}
                    {% if ownerEmail %} • {{ ownerEmail }}{% endif %}
                </div>
            </div>
            
            <div class="content-section">
                <!-- Not logged in - show login prompt -->
                {% if not isLoggedIn %}
                    <div class="login-prompt">
                        <img src="/lendables/logo_community_300.png" alt="LocalLendables" class="logo">
                        <h5>Member Login Required</h5>
                        <p>If you are a LocalLendables Member, please log in below to interact with this item.</p>
                    </div>
                    
                    <button class="action-button btn-login" onclick="window.location.href='/demo'">
                        <i class="fas fa-sign-in-alt me-2"></i>Login as Member
                    </button>
                
                <!-- Logged in - show appropriate actions based on item status and user role -->
                {% elseif isLoggedIn %}
                    
                    <!-- Success/Error Messages -->
                    {% if message %}
                        <div class="alert alert-{{ messageType == 'error' ? 'danger' : 'success' }}">
                            <i class="fas fa-{{ messageType == 'error' ? 'exclamation-triangle' : 'check-circle' }} me-2"></i>
                            {{ message }}
                        </div>
                    {% endif %}
                    
                    <!-- Status Badge -->
                    {% if loanStatus %}
                        <div class="text-center">
                            <span class="status-badge status-{{ loanStatus }}">
                                {% if loanStatus == 'approved' %}Ready for Pickup
                                {% elseif loanStatus == 'active' %}Currently On Loan
                                {% elseif loanStatus == 'return_requested' %}Return in Progress
                                {% else %}{{ loanStatus|title }}
                                {% endif %}
                            </span>
                        </div>
                    {% endif %}
                    
                    <!-- Owner Actions -->
                    {% if isOwner %}
                        
                        {% if loanStatus == 'approved' %}
                            <h5 class="text-center mb-3">Confirm Pickup</h5>
                            <p class="text-center text-muted">Tap when {{ borrowerDisplayName }} picks up this item</p>
                            <button class="action-button btn-pickup" onclick="confirmAction('pickup')">
                                <i class="fas fa-hand-holding me-2"></i>Item Picked Up
                            </button>
                            
                        {% elseif loanStatus == 'return_requested' %}
                            <h5 class="text-center mb-3">Confirm Return</h5>
                            <p class="text-center text-muted">{{ borrowerDisplayName }} is ready to return this item</p>
                            <button class="action-button btn-confirm-return" onclick="confirmAction('return_complete')">
                                <i class="fas fa-check-circle me-2"></i>Item Now Returned
                            </button>
                            
                        {% else %}
                            <h5 class="text-center mb-3">Item Status</h5>
                            <p class="text-center text-muted">No actions needed at this time</p>
                            <button class="action-button btn-secondary" onclick="window.location.href='/item/{{ item.id }}'">
                                <i class="fas fa-eye me-2"></i>View Item Details
                            </button>
                        {% endif %}
                        
                    <!-- Borrower Actions -->
                    {% elseif isBorrower %}
                        
                        {% if loanStatus == 'active' %}
                            <h5 class="text-center mb-3">Ready to Return?</h5>
                            <p class="text-center text-muted">Tap when you're ready to return this item to {{ ownerDisplayName }}</p>
                            <button class="action-button btn-return" onclick="confirmAction('return_request')">
                                <i class="fas fa-undo me-2"></i>I'm Ready to Return
                            </button>
                            
                        {% else %}
                            <h5 class="text-center mb-3">Your Loan</h5>
                            <p class="text-center text-muted">
                                {% if loanStatus == 'approved' %}Waiting for pickup confirmation
                                {% elseif loanStatus == 'return_requested' %}Return initiated - waiting for owner confirmation
                                {% else %}Current status: {{ loanStatus }}
                                {% endif %}
                            </p>
                            <button class="action-button btn-secondary" onclick="window.location.href='/item/{{ item.id }}'">
                                <i class="fas fa-eye me-2"></i>View Item Details
                            </button>
                        {% endif %}
                        
                    <!-- Regular Member - show item detail -->
                    {% else %}
                        <h5 class="text-center mb-3">Member View</h5>
                        <p class="text-center text-muted">View item details and availability</p>
                        <button class="action-button btn-secondary" onclick="window.location.href='/item/{{ item.id }}'">
                            <i class="fas fa-eye me-2"></i>View Item Details
                        </button>
                    {% endif %}
                    
                {% endif %}
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function confirmAction(action) {
            const confirmed = confirm('Are you sure you want to confirm this action?');
            if (confirmed) {
                // Send action to server
                fetch(`/api/qr/{{ qrCode }}/action`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ action: action })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Reload page to show updated status
                        window.location.reload();
                    } else {
                        alert('Error: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred. Please try again.');
                });
            }
        }
    </script>
</body>
</html>