{% extends "dashboard/base.html" %}

{% block title %}Goals & Milestones - Command Center{% endblock %}

{% block content %}
<div class="page-header flex justify-between items-center">
    <div>
        <h1 class="page-title">Goals & Milestones</h1>
        <p class="page-description">Track progress toward key business objectives</p>
    </div>
    <div class="flex items-center gap-2">
        <select class="form-input" style="width: auto;" onchange="window.location.href='?company_id=' + this.value">
            {% for c in companies %}
                <option value="{{ c.id }}" {% if c.id == company_id %}selected{% endif %}>{{ c.name }}</option>
            {% endfor %}
        </select>
    </div>
</div>

{% if goals %}
<div class="grid grid-2">
    {% for goal in goals %}
    <div class="card">
        <div class="card-header">
            <div style="display: flex; justify-content: space-between; align-items: start;">
                <div>
                    <h3 class="card-title">{{ goal.name }}</h3>
                    <p class="card-description">{{ goal.description }}</p>
                </div>
                <span class="badge {% if goal.status == 'active' %}badge-success{% elif goal.status == 'completed' %}badge-info{% else %}badge-warning{% endif %}">
                    {{ goal.status }}
                </span>
            </div>
        </div>
        <div class="card-content">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
                <span class="text-sm text-muted">Progress</span>
                <span style="font-weight: 600;">{{ ((goal.current_value / goal.target_value * 100) if goal.target_value and goal.current_value else 0)|round(0)|int }}%</span>
            </div>
            <div style="height: 6px; background: var(--secondary); border-radius: 3px; margin-bottom: 1rem;">
                <div style="height: 100%; width: {{ ((goal.current_value / goal.target_value * 100) if goal.target_value and goal.current_value else 0)|round(0)|int }}%; background: var(--success); border-radius: 3px;"></div>
            </div>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;">
                <div>
                    <div class="text-xs text-muted">Target Value</div>
                    <div style="font-weight: 600;">{{ goal.target_value }}</div>
                </div>
                <div>
                    <div class="text-xs text-muted">Target Date</div>
                    <div style="font-weight: 600;">{{ goal.end_date.strftime('%b %d, %Y') if goal.end_date else '—' }}</div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="card" style="margin-top: 2rem;">
    <div class="card-content" style="text-align: center; padding: 3rem;">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--muted-foreground)" stroke-width="1.5" style="margin-bottom: 1rem;">
            <circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>
        </svg>
        <h2 class="card-title mb-2">No Goals Yet</h2>
        <p class="text-muted mb-4">Set your first business goal to start tracking progress</p>
        <button class="btn btn-primary btn-lg">Create Goal</button>
    </div>
</div>
{% endif %}
{% endblock %}