{% extends 'base.html' %}
{% block page_title %}{{ 'Edit' if workplan else 'New' }} Workplan{% 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>
  <h4 class="fw-bold mt-2 mb-0">{{ 'Edit' if workplan else 'Create New' }} Workplan</h4>
  <p class="text-muted mb-0" style="font-size:0.85rem;">Project: {{ project.name }}</p>
</div>

<div class="row">
  <div class="col-md-7">
    <div class="card">
      <div class="card-body p-4">
        <form method="POST">
          <div class="row g-3">
            <div class="col-12">
              <label class="form-label">Workplan Title *</label>
              <input type="text" name="title" class="form-control" required
                     value="{{ workplan.title if workplan else '' }}"
                     placeholder="e.g. Q1 2026 Activity Plan">
            </div>
            <div class="col-md-6">
              <label class="form-label">Period</label>
              <input type="text" name="period" class="form-control"
                     value="{{ workplan.period if workplan else '' }}"
                     placeholder="e.g. Q1 2026, January 2026">
            </div>
            <div class="col-md-6">
              <label class="form-label">Status</label>
              <select name="status" class="form-select">
                <option value="draft" {% if workplan and workplan.status == 'draft' %}selected{% endif %}>Draft</option>
                <option value="active" {% if workplan and workplan.status == 'active' %}selected{% endif %}>Active</option>
                <option value="completed" {% if workplan and workplan.status == 'completed' %}selected{% endif %}>Completed</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">Start Date</label>
              <input type="date" name="start_date" class="form-control"
                     value="{{ workplan.start_date.strftime('%Y-%m-%d') if workplan and workplan.start_date else '' }}">
            </div>
            <div class="col-md-6">
              <label class="form-label">End Date</label>
              <input type="date" name="end_date" class="form-control"
                     value="{{ workplan.end_date.strftime('%Y-%m-%d') if workplan and workplan.end_date else '' }}">
            </div>
            <div class="col-12 d-flex gap-2">
              <button type="submit" class="btn btn-primary">
                <i class="bi bi-check-lg me-1"></i>{{ 'Update Workplan' if workplan else 'Create Workplan' }}
              </button>
              <a href="{{ url_for('programs_workplans', project_id=project.id) }}" class="btn btn-outline-secondary">Cancel</a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="col-md-5">
    <div class="card" style="background:#f5f0ff;border:1px solid #d8c8f5;">
      <div class="card-body p-3">
        <h6 class="fw-bold mb-3" style="color:#6f42c1;font-size:0.85rem;"><i class="bi bi-info-circle me-2"></i>About Workplans</h6>
        <div style="font-size:0.8rem;color:#555;">
          <div class="mb-2"><strong>Draft</strong> — Workplan is being prepared, not yet finalized</div>
          <div class="mb-2"><strong>Active</strong> — Workplan is currently being implemented</div>
          <div class="mb-2"><strong>Completed</strong> — All activities have been finished</div>
          <hr style="border-color:#d8c8f5;">
          <p class="mb-0">After creating the workplan, you'll be able to add individual activity items with budgets, timelines, and progress tracking.</p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}