{% extends "layout.html" %}
{% block content %}
<div class="card" style="max-width: 500px; margin: auto;">
    <h2>Edit Goal</h2>
    <form method="POST">
        <label>Goal Name</label>
        <input type="text" name="name" value="{{ goal.name }}" required>
        
        <label>Activity</label>
        <select name="activity_id" id="activitySelect" required onchange="updateSubcategories()">
            <option value="">-- Select Activity --</option>
            {% for act in activities %}
            <option value="{{ act._id }}" 
                    data-subcats='{{ act.subcategories|default([])|tojson }}'
                    {% if act._id|string == goal.activity_id|string %}selected{% endif %}>
                {{ act.name }}
            </option>
            {% endfor %}
        </select>

        <div id="subcatWrapper" style="display:none;">
            <label>Subcategory (Optional)</label>
            <select name="subcategory" id="subcategorySelect">
                <option value="">-- All --</option>
            </select>
        </div>
        
        <label>Frequency</label>
        <select name="frequency">
            <option value="daily" {% if goal.frequency == 'daily' %}selected{% endif %}>Daily</option>
            <option value="weekly" {% if goal.frequency == 'weekly' %}selected{% endif %}>Weekly</option>
            <option value="monthly" {% if goal.frequency == 'monthly' %}selected{% endif %}>Monthly</option>
            <option value="yearly" {% if goal.frequency == 'yearly' %}selected{% endif %}>Yearly</option>
        </select>
        
        <label>Target Hours</label>
        <div class="stepper-input">
            <button type="button" onclick="stepValue(this, -0.5)">-</button>
            <input type="number" name="target_hours" step="0.1" value="{{ goal.target_hours }}" required>
            <button type="button" onclick="stepValue(this, 0.5)">+</button>
        </div>
        
        <div style="margin-top: 1rem; display: flex; gap: 10px;">
            <button type="submit" class="btn">Save Changes</button>
            <a href="{{ url_for('goals') }}" class="btn" style="background: var(--text-secondary); text-decoration: none;">Cancel</a>
        </div>
    </form>
</div>

<script>
    function stepValue(btn, step) {
        const input = btn.parentElement.querySelector('input');
        let val = parseFloat(input.value) || 0;
        val += step;
        if (val < 0) val = 0;
        input.value = val.toFixed(1);
    }

    // Logic to populate subcategories and set current value
    const currentSubcat = "{{ goal.subcategory }}";
    
    function updateSubcategories() {
        const actSelect = document.getElementById('activitySelect');
        const subWrapper = document.getElementById('subcatWrapper');
        const subSelect = document.getElementById('subcategorySelect');
        
        const selectedOption = actSelect.options[actSelect.selectedIndex];
        if (!selectedOption.value) {
            subWrapper.style.display = 'none';
            return;
        }

        const subcats = JSON.parse(selectedOption.getAttribute('data-subcats') || '[]');
        
        subSelect.innerHTML = '<option value="">-- All --</option>';
        
        if (subcats && subcats.length > 0) {
            subWrapper.style.display = 'block';
            subcats.forEach(s => {
                const opt = document.createElement('option');
                opt.value = s;
                opt.innerText = s;
                if (s === currentSubcat && actSelect.value === "{{ goal.activity_id }}") {
                    opt.selected = true;
                }
                subSelect.appendChild(opt);
            });
        } else {
            subWrapper.style.display = 'none';
        }
    }

    // Initialize on load
    updateSubcategories();
</script>
{% endblock %}