{% 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 }}')"
                data-testid="navigate-yesterday">
                <i class="bi bi-chevron-left"></i> Yesterday
            </button>
            <div class="text-center">
                <h3 data-testid="current-date-display">{{ 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 }}')"
                data-testid="navigate-tomorrow">
                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()" data-testid="save-as-template">
                <i class="bi bi-save"></i> Save as Template
            </button>
            <button class="btn btn-primary" onclick="applyTemplate()" data-testid="apply-template">
                <i class="bi bi-upload"></i> Apply Template
            </button>
            {% if is_modified %}
            <button class="btn btn-outline-primary" onclick="resetToPlan()" data-testid="reset-to-plan">
                <i class="bi bi-arrow-counterclockwise"></i> Reset to Plan
            </button>
            {% endif %}
            <button class="btn btn-outline-danger" onclick="resetPage()" data-testid="reset-page">
                <i class="bi bi-x-circle"></i> Reset Page
            </button>
        </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 }}')"
                        data-testid="add-meal-{{ meal_time|slugify }}">
                        <i class="bi bi-plus"></i> Add Meal
                    </button>
                    <button class="btn btn-sm btn-info text-white" onclick="addSingleFoodToTime('{{ meal_time }}')"
                        data-testid="add-food-{{ meal_time|slugify }}">
                        <i class="bi bi-plus-circle"></i> Add Food
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div id="meals-{{ meal_time|slugify }}">
                    {% 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 %}
                    {# 1. Create stable slugs #}
                    {% set meal_time_slug = meal_time|slugify %}
                    {% set meal_name_safe = tracked_meal.meal.name|slugify %}

                    {# 2. Construct the core Unique Meal ID for non-ambiguous locating #}
                    {% set unique_meal_id = meal_time_slug + '-' + meal_name_safe + '-' + loop.index|string %}
                    <div class="mb-3 p-3 bg-light rounded" data-testid="meal-card-{{ unique_meal_id }}">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div>
                                <strong data-testid="meal-name-{{ unique_meal_id }}">{{ 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"
                                    data-testid="edit-meal-{{ unique_meal_id }}">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger"
                                    onclick="removeMeal('{{ tracked_meal.id }}')"
                                    data-testid="delete-meal-{{ unique_meal_id }}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Food Breakdown -->
                        <div class="ms-3">
                            {% set overrides = {} %}
                            {% set all_override_ids = [] %}
                            {% set deleted_food_ids = [] %}
                            {% for tmf in tracked_meal.tracked_foods %}
                            {% if not tmf.is_deleted %}
                            {% set _ = overrides.update({tmf.food_id: tmf}) %}
                            {% else %}
                            {% set _ = deleted_food_ids.append(tmf.food_id) %}
                            {% endif %}
                            {% set _ = all_override_ids.append(tmf.food_id) %}
                            {% endfor %}

                            {% set meal_totals = {'carbs': 0, 'fiber': 0, 'fat': 0, 'protein': 0, 'calories': 0} %}
                            {% set state = {'has_foods': False} %}

                            <div class="table-responsive">
                                <table class="table table-sm table-striped small mb-0">
                                    <thead>
                                        <tr>
                                            <th style="width: 40%">Food</th>
                                            <th class="text-end">Carbs</th>
                                            <th class="text-end">Fiber</th>
                                            <th class="text-end">Net Carbs</th>
                                            <th class="text-end">Fat</th>
                                            <th class="text-end">Protein</th>
                                            <th class="text-end">Cals</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {# Display base meal foods, applying overrides #}
                                        {% for meal_food in tracked_meal.meal.meal_foods %}
                                        {% if meal_food.food_id not in deleted_food_ids and meal_food.food_id not in
                                        overrides.keys() %}
                                        {% set _ = state.update({'has_foods': True}) %}
                                        {% set food = meal_food.food %}
                                        {% set qty = meal_food.quantity %}
                                        {% set mult = qty / food.serving_size if food.serving_size > 0 else 0 %}
                                        {% set row_carbs = (food.carbs or 0) * mult %}
                                        {% set row_fiber = (food.fiber or 0) * mult %}
                                        {% set row_fat = (food.fat or 0) * mult %}
                                        {% set row_protein = (food.protein or 0) * mult %}
                                        {% set row_cals = (food.calories or 0) * mult %}

                                        {# Accumulate Totals #}
                                        {% set _ = meal_totals.update({'carbs': meal_totals.carbs + row_carbs}) %}
                                        {% set _ = meal_totals.update({'fiber': meal_totals.fiber + row_fiber}) %}
                                        {% set _ = meal_totals.update({'fat': meal_totals.fat + row_fat}) %}
                                        {% set _ = meal_totals.update({'protein': meal_totals.protein + row_protein}) %}
                                        {% set _ = meal_totals.update({'calories': meal_totals.calories + row_cals}) %}

                                        {% set food_name_safe = food.name|slugify %}
                                        <tr data-testid="food-row-{{ unique_meal_id }}-{{ food_name_safe }}">
                                            <td>
                                                {{ food.name }}
                                                <span class="text-muted ms-1">({{ qty|round(1) }} {{ food.serving_unit
                                                    }})</span>
                                            </td>
                                            <td class="text-end">{{ "%.1f"|format(row_carbs) }}g</td>
                                            <td class="text-end">{{ "%.1f"|format(row_fiber) }}g</td>
                                            <td class="text-end">{{ "%.1f"|format(row_carbs - row_fiber) }}g</td>
                                            <td class="text-end">{{ "%.1f"|format(row_fat) }}g</td>
                                            <td class="text-end">{{ "%.1f"|format(row_protein) }}g</td>
                                            <td class="text-end fw-bold">{{ "%.0f"|format(row_cals) }}</td>
                                        </tr>
                                        {% endif %}
                                        {% endfor %}

                                        {# Display overridden/new foods #}
                                        {% for food_id, tmf in overrides.items() %}
                                        {% set _ = state.update({'has_foods': True}) %}
                                        {% set food = tmf.food %}
                                        {% set qty = tmf.quantity %}
                                        {# Overrides are always in grams #}
                                        {% set mult = qty / food.serving_size if food.serving_size > 0 else 0 %}
                                        {% set row_carbs = (food.carbs or 0) * mult %}
                                        {% set row_fiber = (food.fiber or 0) * mult %}
                                        {% set row_fat = (food.fat or 0) * mult %}
                                        {% set row_protein = (food.protein or 0) * mult %}
                                        {% set row_cals = (food.calories or 0) * mult %}

                                        {# Accumulate Totals #}
                                        {% set _ = meal_totals.update({'carbs': meal_totals.carbs + row_carbs}) %}
                                        {% set _ = meal_totals.update({'fiber': meal_totals.fiber + row_fiber}) %}
                                        {% set _ = meal_totals.update({'fat': meal_totals.fat + row_fat}) %}
                                        {% set _ = meal_totals.update({'protein': meal_totals.protein + row_protein}) %}
                                        {% set _ = meal_totals.update({'calories': meal_totals.calories + row_cals}) %}

                                        {% set food_name_safe = food.name|slugify %}
                                        <tr class="table-info"
                                            data-testid="food-row-{{ unique_meal_id }}-{{ food_name_safe }}">
                                            <td>
                                                {{ food.name }} <i class="bi bi-pencil-fill x-small text-muted"
                                                    title="Custom Quantity"></i>
                                                <span class="text-muted ms-1">({{ qty|round(1) }} g)</span>
                                            </td>
                                            <td class="text-end">{{ "%.1f"|format(row_carbs) }}g</td>
                                            <td class="text-end">{{ "%.1f"|format(row_fiber) }}g</td>
                                            <td class="text-end">{{ "%.1f"|format(row_carbs - row_fiber) }}g</td>
                                            <td class="text-end">{{ "%.1f"|format(row_fat) }}g</td>
                                            <td class="text-end">{{ "%.1f"|format(row_protein) }}g</td>
                                            <td class="text-end fw-bold">{{ "%.0f"|format(row_cals) }}</td>
                                        </tr>
                                        {% endfor %}

                                        {% if not state.has_foods %}
                                        <tr>
                                            <td colspan="6" class="text-center text-muted">No foods in this meal</td>
                                        </tr>
                                        {% else %}
                                        {# Summary Row #}
                                        <tr class="table-secondary fw-bold">
                                            <td>Total</td>
                                            <td class="text-end">{{ "%.1f"|format(meal_totals.carbs) }}g</td>
                                            <td class="text-end">{{ "%.1f"|format(meal_totals.fiber) }}g</td>
                                            <td class="text-end">{{ "%.1f"|format(meal_totals.carbs - meal_totals.fiber)
                                                }}g</td>
                                            <td class="text-end">{{ "%.1f"|format(meal_totals.fat) }}g</td>
                                            <td class="text-end">{{ "%.1f"|format(meal_totals.protein) }}g</td>
                                            <td class="text-end">{{ "%.0f"|format(meal_totals.calories) }}</td>
                                        </tr>
                                        {% endif %}
                                    </tbody>
                                </table>
                            </div>
                        </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="sticky-top" style="top: 20px;">
            <!-- Daily Totals Card -->
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="mb-0">Daily Totals</h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <!-- Top Row: Calories & Net Carbs -->
                        <div class="col-6 mb-2">
                            <div class="border rounded p-1">
                                <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-2">
                            <div class="border rounded p-1">
                                <strong class="h4 text-warning">{{ "%.1f"|format(day_totals.net_carbs) }}g</strong>
                                <div class="small text-muted">Net Carbs</div>
                            </div>
                        </div>

                        <!-- Second Row: Macros -->
                        <div class="col-4 mb-2">
                            <div class="border rounded p-1">
                                <strong class="h4 d-block text-primary mb-0">{{ "%.1f"|format(day_totals.carbs)
                                    }}g</strong>
                                <div class="small text-muted lh-1">Carbs</div>
                                <div class="small text-muted lh-1">{{ day_totals.carbs_pct }}%</div>
                            </div>
                        </div>
                        <div class="col-4 mb-2">
                            <div class="border rounded p-1">
                                <strong class="h4 d-block text-danger mb-0">{{ "%.1f"|format(day_totals.fat)
                                    }}g</strong>
                                <div class="small text-muted lh-1">Fat</div>
                                <div class="small text-muted lh-1">{{ day_totals.fat_pct }}%</div>
                            </div>
                        </div>
                        <div class="col-4 mb-2">
                            <div class="border rounded p-1">
                                <strong class="h4 d-block text-success mb-0">{{ "%.1f"|format(day_totals.protein)
                                    }}g</strong>
                                <div class="small text-muted lh-1">Protein</div>
                                <div class="small text-muted lh-1">{{ day_totals.protein_pct }}%</div>
                            </div>
                        </div>

                        <!-- Third Row: Micros & Sugar -->
                        <div class="col-4 mb-2">
                            <div class="border rounded p-1">
                                <strong>{{ "%.0f"|format(day_totals.sugar) }}g</strong>
                                <div class="small text-muted">Sugar</div>
                            </div>
                        </div>
                        <div class="col-4 mb-2">
                            <div class="border rounded p-1">
                                <strong>{{ "%.1f"|format(day_totals.fiber) }}g</strong>
                                <div class="small text-muted">Fiber</div>
                            </div>
                        </div>
                        <div class="col-4 mb-2">
                            <div class="border rounded p-1">
                                <strong>{{ "%.0f"|format(day_totals.sodium) }}mg</strong>
                                <div class="small text-muted">Sodium</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Macro Balance Card -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Macro Balance</h5>
                </div>
                <div class="card-body">
                    <!-- Labels Row -->
                    <div class="d-flex w-100 mb-1 small fw-bold">
                        <div class="text-center" style="width: {{ day_totals.carbs_pct }}%; color: #0d6efd;">Carbs</div>
                        <div class="text-center text-danger" style="width: {{ day_totals.fat_pct }}%;">Fat</div>
                        <div class="text-center text-success" style="width: {{ day_totals.protein_pct }}%;">Protein
                        </div>
                    </div>

                    <!-- Stacked Progress Bar -->
                    <div class="progress" style="height: 25px;">
                        <div class="progress-bar" role="progressbar" style="width: {{ day_totals.carbs_pct }}%"
                            aria-valuenow="{{ day_totals.carbs_pct }}" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="progress-bar bg-danger" role="progressbar" style="width: {{ day_totals.fat_pct }}%"
                            aria-valuenow="{{ day_totals.fat_pct }}" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="progress-bar bg-success" role="progressbar"
                            style="width: {{ day_totals.protein_pct }}%" aria-valuenow="{{ day_totals.protein_pct }}"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <!-- Values Row -->
                    <div class="d-flex w-100 mt-1 small text-muted">
                        <div class="text-center" style="width: {{ day_totals.carbs_pct }}%;">{{ day_totals.carbs_pct }}%
                        </div>
                        <div class="text-center" style="width: {{ day_totals.fat_pct }}%;">{{ day_totals.fat_pct }}%
                        </div>
                        <div class="text-center" style="width: {{ day_totals.protein_pct }}%;">{{ day_totals.protein_pct
                            }}%</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}" data-testid="food-quantity-${food.food_id}">
                                <span class="input-group-text">g</span>
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeFoodFromTrackedMeal(${food.food_id}, ${food.id}, ${food.is_custom})" data-testid="delete-food-${food.food_id}">
                                    <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, itemId, 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) {
                // We need to push the foodId, not the itemId, to the removedFoodIds array
                // The backend expects food_id for removals to mark the correct override
                removedFoodIds.push(foodId);
                foodDiv.remove();
                console.log('Removed food with foodId:', foodId, 'itemId:', itemId, 'isCustom:', isCustom, '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), // Pass the item ID to the backend
                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);
        }
    }

    // Reset page (clear all meals and foods)
    async function resetPage() {
        if (confirm('Are you sure you want to clear all meals and foods for this day? This action cannot be undone.')) {
            const formData = new FormData();
            formData.append('person', '{{ person }}');
            formData.append('date', '{{ current_date.isoformat() }}');

            try {
                const response = await fetch('/tracker/clear_page', {
                    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);
            }
        }
    }
</script>
{% endblock %}