{% extends "layouts/base.html" %}
{% block title %}{% if edit_mode %}{{ _('Edit Objective') }}{% else %}{{ _('New Objective') }}{% endif %} - UdeS team manager{% endblock %}
{% block page_title %}{% if edit_mode %}{{ _('Edit Objective') }}{% else %}{{ _('New Objective') }}{% endif %}{% endblock %}
{% block breadcrumb %}<span class="breadcrumb">{{ _('Home') }} / <a href="{{ url_for('objectives.list_objectives') }}">{{ _('Objectives') }}</a> / {% if edit_mode %}{{ _('Edit') }}{% else %}{{ _('New') }}{% endif %}</span>{% endblock %}
{% block content %}
<div class="objective-editor">
  <div class="objective-editor-form">
    <div class="card">
      <div class="card-header"><h3><i class="fas fa-edit"></i> {% if edit_mode %}{{ _('Edit Objective') }}{% else %}{{ _('Create Objective') }}{% endif %}</h3></div>
      <div class="card-body">
        <form method="POST" action="{% if edit_mode %}{{ url_for('objectives.update_objective', objective_id=objective.id) }}{% else %}{{ url_for('objectives.create_objective') }}{% endif %}" class="form" id="objForm">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <div class="form-section">
            <h4><i class="fas fa-info-circle"></i> {{ _('1. General Information') }}</h4>
            <div class="form-row">
              <div class="form-group col-6">
                <label for="obj_type">{{ _('Type') }}</label>
                <select name="type" id="obj_type" class="form-select" onchange="updatePreview();toggleAssignment()">
                  {% for val, label in objective_types %}<option value="{{ val }}"{% if objective and objective.type == val %} selected{% endif %}>{{ label }}</option>{% endfor %}
                </select>
              </div>
              <div class="form-group col-6">
                <label for="obj_status">{{ _('Status') }}</label>
                <select name="status" id="obj_status" class="form-select" onchange="updatePreview()">
                  {% for val, label in objective_statuses %}<option value="{{ val }}"{% if objective and objective.status == val %} selected{% endif %}>{{ label }}</option>{% endfor %}
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="obj_title">{{ _('Title') }} <span class="required">*</span></label>
              <input type="text" name="title" id="obj_title" class="form-input" required value="{{ objective.title if objective else '' }}" placeholder="{{ _('e.g. Improve headshot accuracy') }}" oninput="updatePreview()">
            </div>
            <div class="form-group">
              <label for="obj_description">{{ _('Description') }}</label>
              <textarea name="description" id="obj_description" rows="3" class="form-textarea" placeholder="{{ _('Describe the objective...') }}" oninput="updatePreview()">{{ objective.description if objective else '' }}</textarea>
            </div>
            <div class="form-row">
              <div class="form-group col-6" id="playerField">
                <label for="obj_player_id">{{ _('Assigned to (Player)') }}</label>
                <select name="player_id" id="obj_player_id" class="form-select" onchange="updatePreview()">
                  <option value="">{{ _('-- Select a player --') }}</option>
                  {% for p in players %}<option value="{{ p.id }}"{% if objective and objective.player_id == p.id %} selected{% endif %}>{{ p.username }}</option>{% endfor %}
                </select>
              </div>
              <div class="form-group col-6" id="teamField">
                <label for="obj_team_id">{{ _('Team') }}</label>
                <select name="team_id" id="obj_team_id" class="form-select" onchange="updatePreview()">
                  <option value="">{{ _('-- Select a team --') }}</option>
                  {% for t in teams %}<option value="{{ t.id }}"{% if objective and objective.team_id == t.id %} selected{% endif %}>{{ t.name }}</option>{% endfor %}
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="checkbox-label"><input type="checkbox" name="is_template" id="obj_is_template" value="1"{% if objective and objective.is_template %} checked{% endif %} onchange="updatePreview();toggleAssignment()"> {{ _('This is a template (reusable pattern)') }}</label>
            </div>
          </div>
          <div class="form-section">
            <h4><i class="fas fa-chart-line"></i> {{ _('2. KPI & Target') }}</h4>
            <div class="form-row">
              <div class="form-group col-4">
                <label for="obj_kpi_metric">{{ _('KPI metric') }}</label>
                <input type="text" name="kpi_metric" id="obj_kpi_metric" class="form-input" value="{{ objective.kpi_metric if objective else '' }}" placeholder="{{ _('e.g. HS rate, KDA, CS/min') }}" oninput="updatePreview()">
              </div>
              <div class="form-group col-4">
                <label for="obj_kpi_target">{{ _('Target value') }}</label>
                <input type="number" step="0.01" name="kpi_target" id="obj_kpi_target" class="form-input" value="{{ objective.kpi_target if objective else '' }}" placeholder="{{ _('e.g. 40') }}" oninput="updatePreview()">
              </div>
              <div class="form-group col-4">
                <label for="obj_kpi_unit">{{ _('Unit') }}</label>
                <input type="text" name="kpi_unit" id="obj_kpi_unit" class="form-input" value="{{ objective.kpi_unit if objective else '' }}" placeholder="{{ _('e.g. points, percentage') }}" oninput="updatePreview()">
              </div>
            </div>
          </div>
          <div class="form-section">
            <h4><i class="fas fa-calendar-alt"></i> {{ _('3. Deadline & Priority') }}</h4>
            <div class="form-row">
              <div class="form-group col-4">
                <label for="obj_start_date">{{ _('Start date') }}</label>
                <input type="date" name="start_date" id="obj_start_date" class="form-input" value="{{ objective.start_date.strftime('%Y-%m-%d') if objective and objective.start_date else '' }}" onchange="updatePreview()">
              </div>
              <div class="form-group col-4">
                <label for="obj_due_date">{{ _('Deadline') }} <span class="required">*</span></label>
                <input type="date" name="due_date" id="obj_due_date" class="form-input" required value="{{ objective.due_date.strftime('%Y-%m-%d') if objective else '' }}" onchange="updatePreview()">
              </div>
              <div class="form-group col-4">
                <label for="obj_priority">{{ _('Priority') }}</label>
                <select name="priority" id="obj_priority" class="form-select" onchange="updatePreview()">
                  {% for val, label in objective_priorities %}<option value="{{ val }}"{% if objective and objective.priority == val %} selected{% endif %}>{{ label }}</option>{% endfor %}
                </select>
              </div>
            </div>
          </div>
          <div class="form-section">
            <h4><i class="fas fa-bell"></i> {{ _('4. Tracking & Alerts') }}</h4>
            <div class="form-row">
              <div class="form-group col-6">
                <label for="obj_check_frequency">{{ _('Check frequency') }}</label>
                <select name="check_frequency" id="obj_check_frequency" class="form-select">
                  <option value="">{{ _('-- None --') }}</option>
                  {% for val, label in objective_frequencies %}<option value="{{ val }}"{% if objective and objective.check_frequency == val %} selected{% endif %}>{{ label }}</option>{% endfor %}
                </select>
              </div>
              <div class="form-group col-6">
                <label for="obj_progress">{{ _('Progress') }} (<span id="progressVal">{{ objective.progress if objective else 0 }}</span>%)</label>
                <input type="range" id="obj_progress" name="progress" min="0" max="100" value="{{ objective.progress if objective else 0 }}" class="form-range" oninput="document.getElementById('progressVal').textContent=this.value;updatePreview()">
              </div>
            </div>
          </div>
          <div class="form-section">
            <h4><i class="fas fa-cog"></i> {{ _('5. Advanced Settings') }}</h4>
            <div class="form-group">
              <label for="obj_category">{{ _('Category') }}</label>
              <input type="text" name="category" id="obj_category" class="form-input" value="{{ objective.category if objective else '' }}" placeholder="{{ _('e.g. Mechanics, Teamplay, Communication') }}">
            </div>
            <div class="form-group">
              <label for="obj_tags">{{ _('Tags') }}</label>
              <input type="text" name="tags" id="obj_tags" class="form-input" value="{{ objective.tags if objective else '' }}" placeholder="{{ _('Separate with commas') }}">
            </div>
          </div>
          <div class="form-actions">
            <a href="{{ url_for('objectives.list_objectives') }}" class="btn btn-secondary">{{ _('Cancel') }}</a>
            <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> {% if edit_mode %}{{ _('Update') }}{% else %}{{ _('Create') }}{% endif %}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="objective-editor-preview">
    <div class="card mb-4" id="previewCard">
      <div class="card-header"><h3><i class="fas fa-eye"></i> {{ _('Player Preview') }}</h3></div>
      <div class="card-body">
        <div id="previewContent">
          <h4 id="previewTitle">{{ objective.title if objective else _('Objective title') }}</h4>
          <p id="previewDesc" class="text-muted small">{{ objective.description if objective else '' }}</p>
          <div class="objective-tags" id="previewTags">{% if objective and objective.tags %}{% for tag in objective.tags.split(',') %}<span class="badge badge-light">{{ tag.strip() }}</span>{% endfor %}{% endif %}</div>
          <div class="preview-stats">
            <div class="preview-stat"><span class="preview-label">{{ _('Assigned to') }}</span><span id="previewAssignee" class="preview-value">{% if objective and objective.player %}{{ objective.player.username }}{% else %}-{% endif %}</span></div>
            <div class="preview-stat"><span class="preview-label">{{ _('KPI') }}</span><span id="previewKpi" class="preview-value">{% if objective and objective.kpi_metric %}{{ objective.kpi_metric }}: {{ objective.kpi_target }}{{ objective.kpi_unit }}{% else %}-{% endif %}</span></div>
            <div class="preview-stat"><span class="preview-label">{{ _('Deadline') }}</span><span id="previewDeadline" class="preview-value">{% if objective and objective.due_date %}{{ objective.due_date.strftime('%Y-%m-%d') }}{% endif %}</span></div>
          </div>
          <div class="progress-section">
            <span class="preview-label">{{ _('Progress') }}</span>
            <div class="progress-bar-container" style="width:100%"><div class="progress-bar" id="previewBar" style="width:{{ objective.progress if objective else 0 }}%"></div></div>
            <strong><span id="previewProgress">{{ objective.progress if objective else 0 }}</span>%</strong>
          </div>
        </div>
        <div class="mt-3">
          <span id="previewStatusBadge" class="badge">{% if objective %}{% for val, label in objective_statuses %}{% if val == objective.status %}{{ label }}{% endif %}{% endfor %}{% else %}{{ _('Active') }}{% endif %}</span>
          <span id="previewPriorityBadge" class="badge">{% if objective %}{{ {'high':_('High'),'medium':_('Medium'),'low':_('Low')}.get(objective.priority,objective.priority) }}{% else %}{{ _('Medium') }}{% endif %}</span>
        </div>
      </div>
    </div>
    <div class="card mb-4">
      <div class="card-header"><h3><i class="fas fa-chart-line"></i> {{ _('KPI Progression') }}</h3></div>
      <div class="card-body">
        <svg id="progressChart" viewBox="0 0 400 200" style="width:100%;height:auto;" xmlns="http://www.w3.org/2000/svg"></svg>
        {% if edit_mode and objective.kpi_target %}
        <div class="mt-2 text-center" id="predictionInfo"></div>
        {% endif %}
      </div>
    </div>
    {% if edit_mode %}
    <div class="card mb-4">
      <div class="card-header"><h3><i class="fas fa-database"></i> {{ _('KPI Measurements') }}</h3></div>
      <div class="card-body">
        <form method="POST" action="{{ url_for('objectives.add_entry', objective_id=objective.id) }}" class="form-inline">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <div class="form-group" style="flex:1;">
            <input type="number" step="0.01" name="value" class="form-input" placeholder="{{ _('Value') }}" required>
          </div>
          <div class="form-group" style="flex:2;">
            <input type="text" name="note" class="form-input" placeholder="{{ _('Note (optional)') }}">
          </div>
          <button type="submit" class="btn btn-sm btn-primary"><i class="fas fa-plus"></i> {{ _('Record') }}</button>
        </form>
        {% if entries %}
        <table class="table mt-2">
          <thead><tr><th>{{ _('Date') }}</th><th>{{ _('Value') }}</th><th>{{ _('Note') }}</th></tr></thead>
          <tbody>
            {% for e in entries %}
            <tr><td>{{ e.recorded_at.strftime('%Y-%m-%d %H:%M') }}</td><td><strong>{{ e.value }}</strong></td><td class="text-muted small">{{ e.note or '' }}</td></tr>
            {% endfor %}
          </tbody>
        </table>
        {% endif %}
      </div>
    </div>
    <div class="card mb-4">
      <div class="card-header"><h3><i class="fas fa-comments"></i> {{ _('Comments') }}</h3></div>
      <div class="card-body">
        <form method="POST" action="{{ url_for('objectives.add_comment', objective_id=objective.id) }}" class="form">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <div class="form-group">
            <textarea name="content" rows="2" class="form-textarea" placeholder="{{ _('Add a comment...') }}" required></textarea>
          </div>
          <button type="submit" class="btn btn-sm btn-primary"><i class="fas fa-paper-plane"></i> {{ _('Comment') }}</button>
        </form>
        {% if comments %}
        <div class="comments-list mt-2">
          {% for c in comments %}
          <div class="comment-item">
            <strong>{{ c.coach.username }}</strong> <span class="text-muted small">{{ c.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
            <p>{{ c.content }}</p>
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
    </div>
    {% if personal_notes or team_notes %}
    <div class="card mb-4">
      <div class="card-header"><h3><i class="fas fa-sticky-note"></i> {{ _('Related Notes') }}</h3></div>
      <div class="card-body">
        {% if personal_notes %}
        <h5>{{ _('Player Notes') }}</h5>
        {% for n in personal_notes %}
        <div class="comment-item">
          <strong>{{ n.coach.username }}</strong> <span class="text-muted small">{{ n.created_at.strftime('%Y-%m-%d') }}</span>
          <p>{{ n.content[:200] }}</p>
        </div>
        {% endfor %}
        {% endif %}
        {% if team_notes %}
        <h5 class="mt-2">{{ _('Team Notes') }}</h5>
        {% for n in team_notes %}
        <div class="comment-item">
          <strong>{{ n.coach.username }}</strong> <span class="text-muted small">{{ n.created_at.strftime('%Y-%m-%d') }}</span>
          <p>{{ n.content[:200] }}</p>
        </div>
        {% endfor %}
        {% endif %}
      </div>
    </div>
    {% endif %}
    {% endif %}
    {% if templates %}
    <div class="card">
      <div class="card-header"><h3><i class="fas fa-copy"></i> {{ _('Templates') }}</h3></div>
      <div class="card-body" id="templatesList">
        {% for t in templates %}
        <div class="template-item">
          <h5>{{ t.title }}</h5>
          <p class="text-muted small">{{ t.description[:120] if t.description else '' }}</p>
          <button type="button" class="btn btn-sm btn-outline-primary use-template-btn" onclick="applyTemplate({{ t.id }})"><i class="fas fa-arrow-right"></i> {{ _('Use this template') }}</button>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
var templateDataUrl = '{{ url_for("objectives.objective_data", objective_id=0) }}';
var templates = {};
{% for t in templates %}
(function(id) {
  fetch(templateDataUrl.replace('/0/', '/' + id + '/')).then(function(r) { return r.json(); }).then(function(d) { templates[id] = d; });
})({{ t.id }});
{% endfor %}

function toggleAssignment() {
  var t = document.getElementById('obj_type').value;
  var isTmpl = document.getElementById('obj_is_template').checked;
  var pf = document.getElementById('playerField');
  var tf = document.getElementById('teamField');
  if (isTmpl) { pf.style.display = 'none'; tf.style.display = 'none'; return; }
  pf.style.display = t === 'team' ? 'none' : '';
  tf.style.display = t === 'individual' ? 'none' : '';
}
function applyTemplate(id) {
  var t = templates[id]; if (!t) return;
  document.getElementById('obj_title').value = t.title || '';
  document.getElementById('obj_description').value = t.description || '';
  document.getElementById('obj_type').value = t.type || 'individual';
  document.getElementById('obj_status').value = t.status || 'active';
  document.getElementById('obj_priority').value = t.priority || 'medium';
  document.getElementById('obj_kpi_metric').value = t.kpi_metric || '';
  document.getElementById('obj_kpi_target').value = t.kpi_target || '';
  document.getElementById('obj_kpi_unit').value = t.kpi_unit || '';
  document.getElementById('obj_start_date').value = t.start_date || '';
  document.getElementById('obj_due_date').value = '';
  document.getElementById('obj_check_frequency').value = t.check_frequency || '';
  document.getElementById('obj_category').value = t.category || '';
  document.getElementById('obj_tags').value = t.tags || '';
  document.getElementById('obj_progress').value = 0;
  document.getElementById('progressVal').textContent = '0';
  toggleAssignment(); updatePreview();
}
function updatePreview() {
  var title = document.getElementById('obj_title').value || '';
  var desc = document.getElementById('obj_description').value || '';
  var status = document.getElementById('obj_status').value;
  var priority = document.getElementById('obj_priority').value;
  var kpiMetric = document.getElementById('obj_kpi_metric').value;
  var kpiTarget = document.getElementById('obj_kpi_target').value;
  var kpiUnit = document.getElementById('obj_kpi_unit').value;
  var deadline = document.getElementById('obj_due_date').value;
  var progress = document.getElementById('obj_progress').value;
  var sel = document.getElementById('obj_player_id');
  var playerName = sel.options[sel.selectedIndex] ? sel.options[sel.selectedIndex].text : '-';
  document.getElementById('previewTitle').textContent = title || '{{ _('Objective title') | e }}';
  document.getElementById('previewDesc').textContent = desc;
  document.getElementById('previewAssignee').textContent = playerName;
  document.getElementById('previewKpi').textContent = kpiMetric ? kpiMetric + ': ' + kpiTarget + (kpiUnit || '') : '-';
  document.getElementById('previewDeadline').textContent = deadline;
  document.getElementById('previewBar').style.width = progress + '%';
  document.getElementById('previewProgress').textContent = progress;
  var sl = {}, sc = {'active':'badge-success','pending':'badge-warning','completed':'badge-info','overdue':'badge-danger'};
  var pl = {}, pc = {'high':'badge-danger','medium':'badge-warning','low':'badge-secondary'};
  {% for val, label in objective_statuses %}sl['{{ val }}'] = '{{ label | e }}';{% endfor %}
  {% for val, label in objective_priorities %}pl['{{ val }}'] = '{{ label | e }}';{% endfor %}
  document.getElementById('previewStatusBadge').textContent = sl[status] || status;
  document.getElementById('previewStatusBadge').className = 'badge ' + (sc[status] || 'badge-secondary');
  document.getElementById('previewPriorityBadge').textContent = pl[priority] || priority;
  document.getElementById('previewPriorityBadge').className = 'badge ' + (pc[priority] || 'badge-secondary');
  drawChart(progress, kpiTarget);
}
function drawChart(progress, target) {
  var svg = document.getElementById('progressChart');
  var w = 400, h = 200, pt = 20, pr = 20, pb = 30, pl = 40;
  var cw = w - pl - pr, ch = h - pt - pb;
  var prog = Math.min(parseInt(progress) || 0, 100);
  var py = pt + ch * (1 - prog / 100);
  var tgt = parseFloat(target) || 100;
  var tgtScale = Math.max(tgt, prog);
  var tgtNorm = tgt / (tgtScale);
  var ty = pt + ch * (1 - tgtNorm);
  var html = '<rect x="0" y="0" width="' + w + '" height="' + h + '" fill="transparent"/>';
  html += '<line x1="' + pl + '" y1="' + (pt + ch) + '" x2="' + (pl + cw) + '" y2="' + (pt + ch) + '" stroke="#ddd" stroke-width="1"/>';
  html += '<line x1="' + pl + '" y1="' + pt + '" x2="' + pl + '" y2="' + (pt + ch) + '" stroke="#ddd" stroke-width="1"/>';
  html += '<text x="' + (pl - 30) + '" y="' + (pt + 5) + '" fill="#999" font-size="10">' + tgtScale + '</text>';
  html += '<text x="' + (pl - 30) + '" y="' + (pt + ch / 2 + 4) + '" fill="#999" font-size="10">' + (tgtScale / 2).toFixed(1) + '</text>';
  html += '<text x="' + (pl - 30) + '" y="' + (pt + ch + 4) + '" fill="#999" font-size="10">0</text>';
  html += '<text x="' + pl + '" y="' + (pt + ch + 18) + '" fill="#999" font-size="10">{{ _('Now') | e }}</text>';
  html += '<text x="' + (pl + cw - 50) + '" y="' + (pt + ch + 18) + '" fill="#999" font-size="10">{{ _('Deadline') | e }}</text>';
  html += '<line x1="' + pl + '" y1="' + ty + '" x2="' + (pl + cw) + '" y2="' + ty + '" stroke="#4CAF50" stroke-width="1.5" stroke-dasharray="4,3"/>';
  html += '<text x="' + (pl + cw + 4) + '" y="' + (ty + 4) + '" fill="#4CAF50" font-size="9">{{ _('Target') | e }}</text>';
  html += '<polygon points="' + pl + ',' + (pt + ch) + ' ' + pl + ',' + py + ' ' + (pl + (prog / 100) * cw) + ',' + py + ' ' + (pl + (prog / 100) * cw) + ',' + (pt + ch) + '" fill="rgba(59,130,246,0.15)"/>';
  html += '<line x1="' + pl + '" y1="' + py + '" x2="' + (pl + (prog / 100) * cw) + '" y2="' + py + '" stroke="#3B82F6" stroke-width="2"/>';
  html += '<circle cx="' + (pl + (prog / 100) * cw) + '" cy="' + py + '" r="4" fill="#3B82F6"/>';
  html += '<text x="' + (pl + (prog / 100) * cw - 12) + '" y="' + (py - 8) + '" fill="#3B82F6" font-size="10" font-weight="bold">' + prog + '%</text>';
  svg.innerHTML = html;
}
document.addEventListener('DOMContentLoaded', function() { toggleAssignment(); updatePreview(); });
</script>
{% endblock %}