PantryHub/views/lists/show.ejs

<div class="page-header mb-4">

    <a href="/lists" class="btn btn-link btn-icon">&larr;</a>

    <h1><%= list.name %></h1>

</div>

<div class="row">

    <div class="col-md-8">

        <div class="card">

            <div class="card-body">

                <% if(items.length === 0) { %>

                    <p class="text-secondary">Nog geen producten op de lijst.</p>

                <% } else { %>

                    <div class="list-group">

                        <% items.forEach(item => { %>

                            <div class="list-group-item">

                                <div class="d-flex align-items-center">

                                    <form method="post" action="/lists/<%= list.id %>/items/<%= item.id %>/toggle" style="display: inline;">

                                        <input type="hidden" name="_method" value="POST">

                                        <button class="btn btn-sm" style="border: none; background: none; padding: 0; margin-right: 10px;" 
                                                onclick="this.closest('form').submit(); return false;">

                                            <i class="icon icon-check" style="font-size: 20px; <% if(item.checked) { %>color: #00a651;<% } else { %>color: #ccc;<% } %>"></i>

                                        </button>

                                    </form>

                                    <div class="flex-grow-1">

                                        <strong <% if(item.checked) { %>style="text-decoration: line-through; color: #999;"<% } %>>

                                            <%= item.product_name %>

                                        </strong>

                                        <% if(item.amount && item.amount !== 1) { %>

                                            <span class="badge bg-info"><%= item.amount %></span>

                                        <% } %>

                                        <br>

                                        <small class="text-secondary">

                                            <%= item.category_icon || "" %> <%= item.category_name || "Geen categorie" %>

                                        </small>

                                    </div>

                                    <form class="delete-item-form" action="/lists/<%= list.id %>/items/<%= item.id %>" style="display: inline;">

                                        <button class="btn btn-sm btn-link text-danger" style="border: none;">✕</button>

                                    </form>

                                </div>

                            </div>

                        <% }) %>

                    </div>

                <% } %>

            </div>

        </div>

    </div>

    <div class="col-md-4">

        <div class="card">

            <div class="card-header">

                <h3 class="card-title">Product toevoegen</h3>

            </div>

            <div class="card-body">

                <form method="post" action="/lists/<%= list.id %>/items" id="addItemForm">

                    <div class="mb-3">

                        <label class="form-label">Product</label>

                        <input type="text" id="productSearch" class="form-control" placeholder="Zoek product..." autocomplete="off">

                        <div id="productList" class="list-group mt-2" style="display: none; max-height: 300px; overflow-y: auto;"></div>

                        <input type="hidden" id="productId" name="product_id" required>

                        <small id="selectedProduct" class="text-secondary"></small>

                    </div>

                    <div class="mb-3">

                        <label class="form-label">Hoeveelheid</label>

                        <input 
                            type="number" 
                            class="form-control" 
                            name="amount" 
                            value="1" 
                            step="0.5"
                            min="0.5">

                    </div>

                    <button class="btn btn-primary w-100" type="submit" id="submitBtn" disabled>

                        Toevoegen

                    </button>

                </form>

            </div>

        </div>

    </div>

</div>

<script>
let allProducts = [];

// Load products from API
fetch('/api/products')
    .then(r => r.json())
    .then(products => {
        allProducts = products;
    });

// Product search
document.getElementById('productSearch').addEventListener('input', function() {
    const search = this.value.toLowerCase();
    const listEl = document.getElementById('productList');
    
    if (!search) {
        listEl.style.display = 'none';
        return;
    }
    
    const filtered = allProducts.filter(p => 
        p.name.toLowerCase().includes(search) || 
        (p.category_name && p.category_name.toLowerCase().includes(search))
    );
    
    listEl.replaceChildren();

    filtered.forEach(product => {
        const category = `${product.category_icon || ''} ${product.category_name || 'Geen categorie'}`.trim();
        const button = document.createElement('button');
        button.type = 'button';
        button.className = 'list-group-item list-group-item-action text-start';

        const name = document.createElement('strong');
        name.textContent = product.name;
        const categoryLabel = document.createElement('small');
        categoryLabel.className = 'text-secondary';
        categoryLabel.textContent = category;

        button.append(name, document.createElement('br'), categoryLabel);
        button.addEventListener('click', () => selectProduct(product.id, product.name, category));
        listEl.append(button);
    });
    
    listEl.style.display = 'block';
});

function selectProduct(id, name, category) {
    document.getElementById('productId').value = id;
    document.getElementById('productSearch').value = '';
    document.getElementById('selectedProduct').textContent = name + ' - ' + category;
    document.getElementById('productList').style.display = 'none';
    document.getElementById('submitBtn').disabled = false;
}

// Handle form deletion
document.querySelectorAll('.delete-item-form').forEach(form => {
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        if(confirm('Zeker weten?')) {
            fetch(form.action, { method: 'DELETE' })
                .then(r => r.json())
                .then(() => window.location.reload());
        }
    });
});

// Close product list when clicking outside
document.addEventListener('click', function(e) {
    if (!e.target.closest('#productSearch') && !e.target.closest('#productList')) {
        document.getElementById('productList').style.display = 'none';
    }
});
</script>