<div class="container-jcph">
    <div class="card-header text-center"><h4><%= title %></h4></div>
    <div id="alert-container" class="text-center" style="text-transform: uppercase;"></div>
    <div class="table-responsive mt-2">
        <table class="table table-bordered table-striped table-hover">
            <thead class="thead-dark text-center" style="text-transform: uppercase;">
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <% products.forEach(product => { %>
                    <tr class="nowrap">
                        <td><%= product.ProductCode %></td>
                        <td><%= product.ProductName %></td>
                        <td>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa-solid fa-peso-sign"></i></span>
                                </div>
                                <input type="number" class="form-control" value="<%= product.ProductPrice %>" onchange="updateProductPrice('<%= product.ProductCode %>', this.value)">
                            </div>
                        </td>
                    </tr>
                <% }) %>
            </tbody>
        </table>
        <div class="card-footer text-center">
            <a href="/admin" class="btn btn-secondary">BACK</a>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    function updateProductPrice(productCode, price) {
        $.ajax({
            url: '/admin/catalog/update-price',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ productCode, price }),
            success: function(response) {
                showAlert('Product price updated successfully', 'success');
            },
            error: function(error) {
                console.error('Error updating product price:', error);
                showAlert('Error updating product price', 'danger');
            }
        });
    }

    function showAlert(message, type) {
        const alertContainer = document.getElementById('alert-container');
        const alert = document.createElement('div');
        alert.className = `alert alert-${type} alert-dismissible fade show`;
        alert.role = 'alert';
        alert.innerHTML = `
            ${message}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        `;
        alertContainer.appendChild(alert);

        // Automatically remove the alert after 5 seconds
        setTimeout(() => {
            $(alert).alert('close');
        }, 5000);
    }
</script>