foodplanner/templates/tracker.html

{% extends "base.html" %}
{% block content %}
<div class="row">
    <div class="col-md-8">
        <!-- Date Navigation -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <button class="btn btn-outline-secondary" onclick="navigateDate('{{ prev_date }}')">
                <i class="bi bi-chevron-left"></i> Yesterday
            </button>
            <div class="text-center">
                <h3>{{ current_date.strftime('%A, %B %d, %Y') }}</h3>
                {% if is_modified %}
                <span class="badge bg-warning text-dark">Custom</span>
                {% else %}
                <span class="badge bg-success">As Planned</span>
                {% endif %}
            </div>
            <button class="btn btn-outline-secondary" onclick="navigateDate('{{ next_date }}')">
                Tomorrow <i class="bi bi-chevron-right"></i>
            </button>
        </div>

        <!-- Template Actions -->
        <div class="d-flex justify-content-center gap-2 mb-4">
            <button class="btn btn-success" onclick="saveAsTemplate()">
                <i class="bi bi-save"></i> Save as Template
            </button>
            <button class="btn btn-primary" onclick="applyTemplate()">
                <i class="bi bi-upload"></i> Apply Template
            </button>
            {% if is_modified %}
            <button class="btn btn-outline-primary" onclick="resetToPlan()">
                <i class="bi bi-arrow-counterclockwise"></i> Reset to Plan
            </button>
            {% endif %}
        </div>

        <!-- Meal Times -->
        {% set meal_times = ["Breakfast", "Lunch", "Dinner", "Snack 1", "Snack 2", "Beverage 1", "Beverage 2"] %}
        {% for meal_time in meal_times %}
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">{{ meal_time }}</h5>
                <div class="d-flex gap-2">
                    <button class="btn btn-sm btn-outline-success" onclick="addMealToTime('{{ meal_time }}')">
                        <i class="bi bi-plus"></i> Add Meal
                    </button>
                    <button class="btn btn-sm btn-info text-white" onclick="addSingleFoodToTime('{{ meal_time }}')">
                        <i class="bi bi-plus-circle"></i> Add Food
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div id="meals-{{ meal_time|lower|replace(' ', '-') }}">
                    {% set meals_for_time = [] %}
                    {% for tracked_meal in tracked_meals %}
                        {% if tracked_meal.meal_time == meal_time %}
                            {% set _ = meals_for_time.append(tracked_meal) %}
                        {% endif %}
                    {% endfor %}

                    {% if meals_for_time %}
                        {% for tracked_meal in meals_for_time %}
                        <div class="mb-3 p-3 bg-light rounded">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <div>
                                    <strong>{{ tracked_meal.meal.name }}</strong>
                                </div>
                                <div>
                                    <button class="btn btn-sm btn-outline-secondary me-1" onclick="editTrackedMeal('{{ tracked_meal.id }}')" title="Edit Meal">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger" onclick="removeMeal('{{ tracked_meal.id }}')">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <!-- Food Breakdown -->
                            <div class="ms-3">
                                <div class="row row-cols-1 row-cols-sm-2">
                                {% set overrides = {} %}
                                {% set non_deleted_override_ids = [] %}
                                {% for tmf in tracked_meal.tracked_foods %}
                                    {% if not tmf.is_deleted %}
                                        {% set _ = overrides.update({tmf.food_id: tmf}) %}
                                        {% set _ = non_deleted_override_ids.append(tmf.food_id) %}
                                    {% endif %}
                                {% endfor %}

                                {% set displayed_food_ids = [] %}

                                {# Display base meal foods, applying overrides #}
                                {% for meal_food in tracked_meal.meal.meal_foods %}
                                    {% if meal_food.food_id not in non_deleted_override_ids %}
                                        <div class="col">
                                            <div class="d-flex justify-content-between small text-muted">
                                                <span>• {{ meal_food.food.name }}</span>
                                                <span class="text-end">{{ meal_food.quantity }} {{ meal_food.food.serving_unit }}</span>
                                            </div>
                                        </div>
                                    {% endif %}
                                    {% set _ = displayed_food_ids.append(meal_food.food_id) %}
                                {% endfor %}

                                {# Display overridden and new foods #}
                                {% for food_id, tmf in overrides.items() %}
                                    <div class="col">
                                        <div class="d-flex justify-content-between small text-muted">
                                            <span>• {{ tmf.food.name }}</span>
                                            <span class="text-end">{{ tmf.quantity }} g</span>
                                        </div>
                                    </div>
                                {% endfor %}
                                </div>
                                {% if not tracked_meal.meal.meal_foods %}
                                <div class="col-12">
                                    <div class="small text-muted">No foods in this meal</div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <p class="text-muted mb-0">No meals tracked</p>
                    {% endif %}
                </div>

            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Right Column - Nutrition Totals -->
    <div class="col-md-4">
        <div class="card sticky-top" style="top: 20px;">
            <div class="card-header">
                <h5 class="mb-0">Daily Totals</h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-6 mb-3">
                        <div class="border rounded p-2">
                            <strong class="h4 text-primary">{{ "%.0f"|format(day_totals.calories) }}</strong>
                            <div class="small text-muted">Calories</div>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <div class="border rounded p-2">
                            <strong class="h4 text-success">{{ "%.1f"|format(day_totals.protein) }}g</strong>
                            <div class="small text-muted">Protein ({{ day_totals.protein_pct }}%)</div>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <div class="border rounded p-2">
                            <strong>{{ "%.1f"|format(day_totals.carbs) }}g</strong>
                            <div class="small text-muted">Carbs ({{ day_totals.carbs_pct }}%)</div>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <div class="border rounded p-2">
                            <strong class="h4 text-danger">{{ "%.1f"|format(day_totals.fat) }}g</strong>
                            <div class="small text-muted">Fat ({{ day_totals.fat_pct }}%)</div>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <div class="border rounded p-2">
                            <strong>{{ "%.1f"|format(day_totals.fiber) }}g</strong>
                            <div class="small text-muted">Fiber</div>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <div class="border rounded p-2">
                            <strong class="h4 text-warning">{{ "%.1f"|format(day_totals.net_carbs) }}g</strong>
                            <div class="small text-muted">Net Carbs</div>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <div class="border rounded p-2">
                            <strong>{{ "%.0f"|format(day_totals.sugar) }}g</strong>
                            <div class="small text-muted">Sugar</div>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <div class="border rounded p-2">
                            <strong>{{ "%.0f"|format(day_totals.sodium) }}mg</strong>
                            <div class="small text-muted">Sodium</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% include 'modals/add_meal.html' %}
{% include 'modals/save_template.html' %}
{% include 'modals/apply_template.html' %}
{% include 'modals/edit_tracked_meal.html' %}
{% include 'modals/add_single_food.html' %}

<script>
    // Date navigation
    function navigateDate(date) {
        const url = new URL(window.location);
        url.searchParams.set('date', date);
        window.location.href = url.toString();
    }

    // Add meal to specific time
    function addMealToTime(mealTime) {
        console.log('addMealToTime called with:', mealTime);
        document.getElementById('mealTimeDisplay').textContent = mealTime;
        document.getElementById('addMealTime').value = mealTime;
        new bootstrap.Modal(document.getElementById('addMealModal')).show();
        console.log('addMealModal should be shown.');
    }

    // Submit add meal form
    async function submitAddMeal() {
        const form = document.getElementById('addMealForm');
        const formData = new FormData(form);

        try {
            const response = await fetch('/tracker/add_meal', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();

            if (result.status === 'success') {
                bootstrap.Modal.getInstance(document.getElementById('addMealModal')).hide();
                location.reload();
            } else {
                alert('Error: ' + result.message);
            }
        } catch (error) {
            alert('Error: ' + error.message);
        }
    }

    // Remove meal
    async function removeMeal(trackedMealId) {
        if (confirm('Remove this meal from the tracker?')) {
            try {
                const response = await fetch(`/tracker/remove_meal/${trackedMealId}`, {
                    method: 'DELETE'
                });

                const result = await response.json();

                if (result.status === 'success') {
                    location.reload();
                } else {
                    alert('Error: ' + result.message);
                }
            } catch (error) {
                alert('Error: ' + error.message);
            }
        }
    }

    // Save as template
    function saveAsTemplate() {
        new bootstrap.Modal(document.getElementById('saveTemplateModal')).show();
    }

    // Submit save template
    async function submitSaveTemplate() {
        const form = document.getElementById('saveTemplateForm');
        const formData = new FormData(form);

        try {
            const response = await fetch('/tracker/save_template', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();

            if (result.status === 'success') {
                bootstrap.Modal.getInstance(document.getElementById('saveTemplateModal')).hide();
                alert('Template saved successfully!');
            } else {
                alert('Error: ' + result.message);
            }
        } catch (error) {
            alert('Error: ' + error.message);
        }
    }

    // Apply template
    function applyTemplate() {
        new bootstrap.Modal(document.getElementById('applyTemplateModal')).show();
    }

    // Submit apply template
    async function submitApplyTemplate() {
        const form = document.getElementById('applyTemplateForm');
        const formData = new FormData(form);

        try {
            const response = await fetch('/tracker/apply_template', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();

            if (result.status === 'success') {
                bootstrap.Modal.getInstance(document.getElementById('applyTemplateModal')).hide();
                location.reload();
            } else {
                alert('Error: ' + result.message);
            }
        } catch (error) {
            alert('Error: ' + error.message);
        }
    }

    // Reset to plan
    async function resetToPlan() {
        if (confirm('Reset this day back to the original plan? All custom changes will be lost.')) {
            const formData = new FormData();
            formData.append('person', '{{ person }}');
            formData.append('date', '{{ current_date.isoformat() }}');

            try {
                const response = await fetch('/tracker/reset_to_plan', {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();

                if (result.status === 'success') {
                    location.reload();
                } else {
                    alert('Error: ' + result.message);
                }
            } catch (error) {
                alert('Error: ' + error.message);
            }
        }
    }

    // Edit tracked meal
    let removedFoodIds = [];

    function editTrackedMeal(trackedMealId) {
        removedFoodIds = []; // Reset the array when a new meal is edited
        document.getElementById('editTrackedMealId').value = trackedMealId;
        loadTrackedMealFoods(trackedMealId);
        new bootstrap.Modal(document.getElementById('editTrackedMealModal')).show();
    }

    // Load foods for editing
    async function loadTrackedMealFoods(trackedMealId) {
        console.log('loadTrackedMealFoods called with:', trackedMealId);
        document.getElementById('tracked_meal_id_for_food').value = trackedMealId;
        try {
            const response = await fetch(`/tracker/get_tracked_meal_foods/${trackedMealId}`);
            const data = await response.json();
            console.log('Response from get_tracked_meal_foods:', data);
            
            const container = document.getElementById('editMealFoodsList');
            container.innerHTML = '';
            
            if (data.status === 'success') {
                if (data.meal_foods.length === 0) {
                    container.innerHTML = '<em>No foods added yet</em>';
                    console.log('No foods found for tracked meal.');
                } else {
                    data.meal_foods.forEach(food => {
                        const foodDiv = document.createElement('div');
                        foodDiv.className = 'd-flex justify-content-between align-items-center mb-2';
                        foodDiv.innerHTML = `
                            <span>${food.food_name}</span>
                            <div class="input-group w-50">
                                <input type="number" step="0.01" class="form-control form-control-sm" value="${food.quantity.toFixed(2)}" data-food-id="${food.food_id}" data-item-id="${food.id}" data-is-custom="${food.is_custom}">
                                <span class="input-group-text">g</span>
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeFoodFromTrackedMeal(${food.food_id}, ${food.is_custom})">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        `;
                        container.appendChild(foodDiv);
                        console.log('Added food to modal:', food.food_name, 'Quantity:', food.quantity);
                    });
                }
            } else {
                console.error('Error status in response:', data.message);
            }
        } catch (error) {
            console.error('Error loading tracked meal foods:', error);
            alert('Error loading tracked meal foods.');
        }
    }

    function removeFoodFromTrackedMeal(foodId, isCustom) {
        // Find the button that was clicked
        const button = event.target.closest('button');
        if (button) {
            // Find the parent div and remove it
            const foodDiv = button.closest('.d-flex');
            if (foodDiv) {
                const foodDataId = parseInt(foodDiv.querySelector('input').dataset.foodId);
                removedFoodIds.push(foodDataId);
                foodDiv.remove();
                console.log('Removed food with ID:', foodDataId, 'and removedFoodIds is now:', removedFoodIds);
            }
        }
    }

    async function saveTrackedMeal() {
        const trackedMealId = document.getElementById('editTrackedMealId').value;
        const inputs = document.querySelectorAll('#editMealFoodsList input[type="number"]');
        
        const foods = [];
        inputs.forEach(input => {
            const foodData = {
                id: parseInt(input.dataset.itemId),
                food_id: parseInt(input.dataset.foodId),
                grams: parseFloat(input.value), // Renamed to grams to match backend
                is_custom: input.dataset.isCustom === 'true'
            };
            foods.push(foodData);
        });

        const payload = {
            tracked_meal_id: trackedMealId,
            foods: foods,
            removed_food_ids: removedFoodIds
        };

        console.log('Payload being sent to /tracker/update_tracked_meal_foods:', JSON.stringify(payload, null, 2));
        
        try {
            const response = await fetch('/tracker/update_tracked_meal_foods', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            const result = await response.json();
            if (result.status === 'success') {
                bootstrap.Modal.getInstance(document.getElementById('editTrackedMealModal')).hide();
                location.reload();
            } else {
                alert('Error saving tracked meal: ' + result.message);
            }
        } catch (error) {
            console.error('Error saving tracked meal:', error);
            alert('Error saving tracked meal.');
        }
    }

    // Save as new meal
    async function saveAsNewMeal() {
        const mealName = prompt('Enter name for new meal:');
        if (!mealName) return;
        
        const trackedMealId = document.getElementById('editTrackedMealId').value;
        const inputs = document.querySelectorAll('#editMealFoodsList input[type="number"]');
        
        const foods = [];
        inputs.forEach(input => {
            foods.push({
                food_id: parseInt(input.dataset.foodId),
                quantity: parseFloat(input.value) // Quantity is now grams
            });
        });
        
        try {
            const response = await fetch('/tracker/save_as_new_meal', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    tracked_meal_id: trackedMealId,
                    new_meal_name: mealName,
                    foods: foods
                })
            });
            
            const result = await response.json();
            
            if (result.status === 'success') {
                bootstrap.Modal.getInstance(document.getElementById('editTrackedMealModal')).hide();
                alert('New meal saved successfully!');
                location.reload();
            } else {
                alert('Error: ' + result.message);
            }
        } catch (error) {
            alert('Error: ' + error.message);
        }
    }

    // Show add single food modal and pre-select meal time
    function addSingleFoodToTime(mealTime) {
        document.getElementById('addSingleFoodMealTime').value = mealTime;
        new bootstrap.Modal(document.getElementById('addSingleFoodModal')).show();
    }


    // Submit add single food form
    async function submitAddSingleFood() {
        const form = document.getElementById('addSingleFoodForm');
        const formData = new FormData(form);

        try {
            const response = await fetch('/tracker/add_food', {
                method: 'POST',
                body: JSON.stringify(Object.fromEntries(formData)), // Convert FormData to JSON
                headers: { 'Content-Type': 'application/json' }
            });

            const result = await response.json();

            if (result.status === 'success') {
                bootstrap.Modal.getInstance(document.getElementById('addSingleFoodModal')).hide();
                location.reload();
            } else {
                alert('Error: ' + result.message);
            }
        } catch (error) {
            alert('Error: ' + error.message);
        }
    }
</script>
{% endblock %}