{% extends 'base.html' %}
{% block page_title %}{{ workplan.title }}{% endblock %}
{% block content %}
<div class="mb-4">
  <a href="{{ url_for('programs_workplans', project_id=project.id) }}" class="text-muted text-decoration-none" style="font-size:0.85rem;">
    <i class="bi bi-arrow-left me-1"></i>Back to {{ project.name }} Workplans
  </a>
  <div class="d-flex justify-content-between align-items-center mt-2">
    <div>
      <h4 class="fw-bold mb-1">{{ workplan.title }}</h4>
      <p class="text-muted mb-0" style="font-size:0.85rem;">
        <span class="badge {% if workplan.status == 'active' %}bg-success{% elif workplan.status == 'completed' %}bg-secondary{% else %}bg-warning text-dark{% endif %}" style="font-size:0.72rem;">{{ workplan.status.title() }}</span>
        {% if workplan.period %}<span class="ms-2"><i class="bi bi-clock-history me-1"></i>{{ workplan.period }}</span>{% endif %}
        {% if workplan.start_date %}<span class="ms-2"><i class="bi bi-calendar3 me-1"></i>{{ workplan.start_date|format_date }} → {{ workplan.end_date|format_date if workplan.end_date else 'Ongoing' }}</span>{% endif %}
      </p>
    </div>
    <div class="d-flex gap-2">
      <a href="{{ url_for('programs_workplan_edit', workplan_id=workplan.id) }}" class="btn btn-outline-primary btn-sm"><i class="bi bi-pencil me-1"></i>Edit</a>
      <form method="POST" action="{{ url_for('programs_workplan_delete', workplan_id=workplan.id) }}" onsubmit="return confirm('Delete this workplan and all its items?')">
        <button class="btn btn-outline-danger btn-sm"><i class="bi bi-trash me-1"></i>Delete</button>
      </form>
    </div>
  </div>
</div>

<!-- SUMMARY CARDS -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="card">
      <div class="card-body p-3 text-center">
        <div style="font-size:1.5rem;font-weight:700;color:#6f42c1;">{{ workplan.item_count }}</div>
        <div style="font-size:0.75rem;color:#888;">Total Items</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card">
      <div class="card-body p-3 text-center">
        <div style="font-size:1.5rem;font-weight:700;color:#20c997;">{{ workplan.completed_items }}</div>
        <div style="font-size:0.75rem;color:#888;">Completed</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card">
      <div class="card-body p-3 text-center">
        <div style="font-size:1.5rem;font-weight:700;color:#0d6efd;">{{ workplan.avg_progress }}%</div>
        <div style="font-size:0.75rem;color:#888;">Avg Progress</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card">
      <div class="card-body p-3 text-center">
        <div style="font-size:1.5rem;font-weight:700;color:#f0a500;">{{ workplan.total_budget|format_currency }}</div>
        <div style="font-size:0.75rem;color:#888;">Total Budget (MWK)</div>
      </div>
    </div>
  </div>
</div>

<!-- ITEMS TABLE -->
<div class="card mb-4">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span class="fw-bold" style="font-size:0.9rem;"><i class="bi bi-list-check me-2" style="color:#6f42c1;"></i>Workplan Items</span>
    <button class="btn btn-primary btn-sm" data-bs-toggle="collapse" data-bs-target="#addItemForm">
      <i class="bi bi-plus-lg me-1"></i>Add Item
    </button>
  </div>

  <!-- INLINE ADD FORM -->
  <div class="collapse" id="addItemForm">
    <div class="card-body border-bottom" style="background:#f8f9fa;">
      <form method="POST" action="{{ url_for('programs_item_add', workplan_id=workplan.id) }}">
        <div class="row g-2">
          <div class="col-md-6">
            <label class="form-label">Activity / Task *</label>
            <input type="text" name="activity" class="form-control form-control-sm" required>
          </div>
          <div class="col-md-3">
            <label class="form-label">Responsible</label>
            <input type="text" name="responsible" class="form-control form-control-sm">
          </div>
          <div class="col-md-3">
            <label class="form-label">Budget (MWK)</label>
            <input type="number" name="budget" class="form-control form-control-sm" step="0.01">
          </div>
          <div class="col-md-3">
            <label class="form-label">Start Date</label>
            <input type="date" name="start_date" class="form-control form-control-sm">
          </div>
          <div class="col-md-3">
            <label class="form-label">End Date</label>
            <input type="date" name="end_date" class="form-control form-control-sm">
          </div>
          <div class="col-md-2">
            <label class="form-label">Status</label>
            <select name="status" class="form-select form-select-sm">
              <option value="planned">Planned</option>
              <option value="in_progress">In Progress</option>
              <option value="completed">Completed</option>
              <option value="delayed">Delayed</option>
            </select>
          </div>
          <div class="col-md-2">
            <label class="form-label">Progress %</label>
            <input type="number" name="progress" class="form-control form-control-sm" min="0" max="100" value="0">
          </div>
          <div class="col-md-2 d-flex align-items-end">
            <button type="submit" class="btn btn-primary btn-sm w-100"><i class="bi bi-plus-lg me-1"></i>Add</button>
          </div>
        </div>
        <div class="row g-2 mt-1">
          <div class="col-12">
            <label class="form-label">Notes</label>
            <input type="text" name="notes" class="form-control form-control-sm" placeholder="Optional notes...">
          </div>
        </div>
      </form>
    </div>
  </div>

  <div class="card-body p-0">
    {% if workplan.items %}
    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead>
          <tr>
            <th class="ps-3" style="min-width:200px;">Activity</th>
            <th>Responsible</th>
            <th>Timeline</th>
            <th>Budget</th>
            <th>Status</th>
            <th>Progress</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
        {% for item in workplan.items %}
        <tr>
          <td class="ps-3">
            <div style="font-size:0.87rem;font-weight:500;">{{ item.activity }}</div>
            {% if item.notes %}<div style="font-size:0.72rem;color:#999;">{{ item.notes[:60] }}{% if item.notes|length > 60 %}…{% endif %}</div>{% endif %}
          </td>
          <td style="font-size:0.82rem;">{{ item.responsible or '—' }}</td>
          <td style="font-size:0.78rem;color:#888;">
            {% if item.start_date %}{{ item.start_date|format_date }}{% endif %}
            {% if item.end_date %}<br>→ {{ item.end_date|format_date }}{% endif %}
            {% if not item.start_date and not item.end_date %}—{% endif %}
          </td>
          <td style="font-size:0.82rem;">{% if item.budget %}{{ item.budget|format_currency }} {{ item.currency }}{% else %}—{% endif %}</td>
          <td>
            <span class="badge {% if item.status == 'completed' %}bg-success{% elif item.status == 'in_progress' %}bg-primary{% elif item.status == 'delayed' %}bg-danger{% else %}bg-warning text-dark{% endif %}" style="font-size:0.7rem;">
              {{ item.status.replace('_',' ').title() }}
            </span>
          </td>
          <td style="width:90px;">
            <div style="font-size:0.72rem;color:#666;margin-bottom:2px;">{{ item.progress }}%</div>
            <div class="progress" style="height:6px;">
              <div class="progress-bar" style="width:{{ item.progress }}%;background:{% if item.status == 'delayed' %}#dc3545{% else %}#6f42c1{% endif %};"></div>
            </div>
          </td>
          <td>
            <div class="d-flex gap-1">
              <button class="btn btn-sm btn-outline-secondary" style="font-size:0.7rem;padding:2px 6px;" data-bs-toggle="modal" data-bs-target="#editItem{{ item.id }}">
                <i class="bi bi-pencil"></i>
              </button>
              <form method="POST" action="{{ url_for('programs_item_delete', item_id=item.id) }}" onsubmit="return confirm('Remove this item?')">
                <button class="btn btn-sm btn-outline-danger" style="font-size:0.7rem;padding:2px 6px;">
                  <i class="bi bi-trash"></i>
                </button>
              </form>
            </div>
          </td>
        </tr>
        {% endfor %}
        </tbody>
        <tfoot>
          <tr style="background:#f8f9fa;">
            <td class="ps-3 fw-bold" colspan="3" style="font-size:0.82rem;">Total</td>
            <td class="fw-bold" style="font-size:0.82rem;">{{ workplan.total_budget|format_currency }} MWK</td>
            <td colspan="3"></td>
          </tr>
        </tfoot>
      </table>
    </div>
    {% else %}
    <div class="text-center py-4 text-muted">
      <i class="bi bi-list-check" style="font-size:2rem;opacity:0.3;display:block;"></i>
      <p class="mt-2 mb-1" style="font-size:0.85rem;">No items yet</p>
      <p style="font-size:0.78rem;color:#aaa;">Click "Add Item" above to start building this workplan</p>
    </div>
    {% endif %}
  </div>
</div>

<!-- EDIT MODALS -->
{% for item in workplan.items %}
<div class="modal fade" id="editItem{{ item.id }}" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form method="POST" action="{{ url_for('programs_item_edit', item_id=item.id) }}">
        <div class="modal-header">
          <h6 class="modal-title fw-bold">Edit Item</h6>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="row g-3">
            <div class="col-md-8">
              <label class="form-label">Activity / Task *</label>
              <input type="text" name="activity" class="form-control" value="{{ item.activity }}" required>
            </div>
            <div class="col-md-4">
              <label class="form-label">Responsible</label>
              <input type="text" name="responsible" class="form-control" value="{{ item.responsible or '' }}">
            </div>
            <div class="col-md-3">
              <label class="form-label">Start Date</label>
              <input type="date" name="start_date" class="form-control" value="{{ item.start_date.strftime('%Y-%m-%d') if item.start_date else '' }}">
            </div>
            <div class="col-md-3">
              <label class="form-label">End Date</label>
              <input type="date" name="end_date" class="form-control" value="{{ item.end_date.strftime('%Y-%m-%d') if item.end_date else '' }}">
            </div>
            <div class="col-md-3">
              <label class="form-label">Budget (MWK)</label>
              <input type="number" name="budget" class="form-control" step="0.01" value="{{ item.budget or '' }}">
            </div>
            <div class="col-md-3">
              <label class="form-label">Currency</label>
              <select name="currency" class="form-select">
                <option value="MWK" {% if item.currency == 'MWK' %}selected{% endif %}>MWK</option>
                <option value="USD" {% if item.currency == 'USD' %}selected{% endif %}>USD</option>
                <option value="EUR" {% if item.currency == 'EUR' %}selected{% endif %}>EUR</option>
                <option value="GBP" {% if item.currency == 'GBP' %}selected{% endif %}>GBP</option>
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label">Status</label>
              <select name="status" class="form-select">
                <option value="planned" {% if item.status == 'planned' %}selected{% endif %}>Planned</option>
                <option value="in_progress" {% if item.status == 'in_progress' %}selected{% endif %}>In Progress</option>
                <option value="completed" {% if item.status == 'completed' %}selected{% endif %}>Completed</option>
                <option value="delayed" {% if item.status == 'delayed' %}selected{% endif %}>Delayed</option>
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label">Progress (%)</label>
              <input type="number" name="progress" class="form-control" min="0" max="100" value="{{ item.progress }}">
            </div>
            <div class="col-12">
              <label class="form-label">Notes</label>
              <textarea name="notes" class="form-control" rows="2">{{ item.notes or '' }}</textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i>Update Item</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endfor %}
{% endblock %}