<!-- Edit Tracked Meal Modal -->
<div class="modal fade" id="editTrackedMealModal" tabindex="-1" aria-labelledby="editTrackedMealModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editTrackedMealModalLabel">Edit Tracked Meal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="editTrackedMealId" value="">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Add Food to Tracked Meal</h6>
                        <form id="addFoodToTrackedMealForm">
                            <input type="hidden" id="tracked_meal_id_for_food" name="tracked_meal_id">
                            <div class="mb-3">
                                <label class="form-label">Select Food</label>
                                <select class="form-control" id="foodSelectTrackedMeal" name="food_id" required>
                                    <option value="">Choose food...</option>
                                    {% for food in foods %}
                                    <option value="{{ food.id }}">{{ food.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Quantity (g)</label>
                                <input type="number" step="0.01" class="form-control" name="quantity" value="100" placeholder="Enter weight in grams" required>
                            </div>
                            <button type="button" class="btn btn-success" onclick="addFoodToTrackedMeal()">Add Food</button>
                        </form>
                    </div>
                    <div class="col-md-6">
                        <h6>Current Foods in Tracked Meal</h6>
                        <div id="editMealFoodsList">
                            <!-- Foods will be loaded here -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="saveTrackedMeal()">Save Changes</button>
                <button type="button" class="btn btn-success" onclick="saveAsNewMeal()">Save as New Meal</button>
            </div>
        </div>
    </div>
</div>

<script>
    // Function to add food dynamically to the edit meal list
    async function addFoodToTrackedMeal() {
        const foodSelect = document.getElementById('foodSelectTrackedMeal');
        const foodId = foodSelect.value;
        const foodName = foodSelect.options[foodSelect.selectedIndex].text;
        const quantityInput = document.querySelector('#addFoodToTrackedMealForm input[name="quantity"]');
        const quantity = quantityInput.value;

        if (!foodId || !quantity) {
            alert('Please select a food and enter a quantity.');
            return;
        }

        const container = document.getElementById('editMealFoodsList');
        // If "No foods added yet" message exists, remove it
        const noFoodsMessage = container.querySelector('em');
        if (noFoodsMessage) {
            noFoodsMessage.remove();
        }

        const foodDiv = document.createElement('div');
        foodDiv.className = 'd-flex justify-content-between align-items-center mb-2';
        foodDiv.innerHTML = `
            <span>${foodName}</span>
            <div class="input-group w-50">
                <input type="number" step="0.01" class="form-control form-control-sm" value="${parseFloat(quantity).toFixed(2)}" data-food-id="${foodId}" data-item-id="0" data-is-custom="true" data-testid="food-quantity-${foodId}">
                <span class="input-group-text">g</span>
                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeFoodFromTrackedMeal(${foodId}, true)" data-testid="delete-food-${foodId}">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
        `;
        container.appendChild(foodDiv);

        // Clear the form for next entry
        foodSelect.value = '';
        quantityInput.value = '100'; // Reset to default
    }
</script>