{% extends 'base.html' %}
{% block page_title %}Programs Dashboard{% endblock %}
{% block content %}
<div class="mb-4">
  <h4 class="fw-bold mb-1">Programs Department</h4>
  <p class="text-muted mb-0" style="font-size:0.87rem;">Manage workplans, track activities, and coordinate program events</p>
</div>

<!-- STATS -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#6f42c1,#9c6fe4);">
      <div class="d-flex justify-content-between align-items-start">
        <div><div class="stat-value">{{ stats.projects }}</div><div class="stat-label">Projects</div></div>
        <i class="bi bi-folder-fill stat-icon"></i>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#0d6efd,#3d8bfd);">
      <div class="d-flex justify-content-between align-items-start">
        <div><div class="stat-value">{{ stats.workplans }}</div><div class="stat-label">Workplans</div></div>
        <i class="bi bi-clipboard2-data-fill stat-icon"></i>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#f0a500,#f5c000);">
      <div class="d-flex justify-content-between align-items-start">
        <div><div class="stat-value">{{ stats.active_items }}</div><div class="stat-label">Active Items</div></div>
        <i class="bi bi-list-check stat-icon"></i>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#20c997,#3dd5a7);">
      <div class="d-flex justify-content-between align-items-start">
        <div><div class="stat-value">{{ stats.upcoming_events }}</div><div class="stat-label">Upcoming Events</div></div>
        <i class="bi bi-calendar-event-fill stat-icon"></i>
      </div>
    </div>
  </div>
</div>

<!-- PROJECTS with workplan links -->
<div class="row g-3 mb-4">
  <div class="col-12">
    <div class="card">
      <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-folder-fill me-2" style="color:#6f42c1;"></i>Projects &amp; Workplans</span>
      </div>
      <div class="card-body p-0">
        {% if projects %}
        <table class="table table-hover mb-0">
          <thead>
            <tr>
              <th class="ps-3">Project</th>
              <th>Status</th>
              <th>Workplans</th>
              <th>Progress</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
          {% for p in projects %}
          <tr>
            <td class="ps-3">
              <div class="fw-bold" style="font-size:0.87rem;color:#1a2332;">{{ p.name }}</div>
              {% if p.donor %}<div style="font-size:0.72rem;color:#999;">{{ p.donor }}</div>{% endif %}
            </td>
            <td><span class="badge badge-{{ p.status }}" style="font-size:0.72rem;">{{ p.status.title() }}</span></td>
            <td>
              <span class="badge bg-light text-dark" style="font-size:0.75rem;">
                <i class="bi bi-clipboard2-data me-1"></i>{{ p.workplans|length }}
              </span>
            </td>
            <td style="width:110px;">
              <div style="font-size:0.75rem;color:#666;margin-bottom:3px;">{{ p.avg_progress }}%</div>
              <div class="progress"><div class="progress-bar" style="width:{{ p.avg_progress }}%;background:#6f42c1;"></div></div>
            </td>
            <td>
              <a href="{{ url_for('programs_workplans', project_id=p.id) }}" class="btn btn-sm btn-outline-primary" style="font-size:0.75rem;">
                <i class="bi bi-clipboard2-data me-1"></i>Workplans
              </a>
            </td>
          </tr>
          {% endfor %}
          </tbody>
        </table>
        {% else %}
        <div class="text-center py-4 text-muted">
          <i class="bi bi-folder" style="font-size:2rem;opacity:0.3;display:block;"></i>
          <p class="mt-2 mb-1" style="font-size:0.85rem;">No projects yet</p>
          <a href="{{ url_for('me_project_add') }}" class="btn btn-sm btn-primary mt-1">Add First Project</a>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- RECENT WORKPLANS + UPCOMING EVENTS -->
<div class="row g-3">
  <div class="col-md-7">
    <div class="card">
      <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-clipboard2-data-fill me-2" style="color:#0d6efd;"></i>Recent Workplans</span>
      </div>
      <div class="card-body p-0">
        {% if recent_workplans %}
        <table class="table table-hover mb-0">
          <thead><tr><th class="ps-3">Title</th><th>Project</th><th>Period</th><th>Status</th><th>Progress</th></tr></thead>
          <tbody>
          {% for w in recent_workplans %}
          <tr>
            <td class="ps-3">
              <a href="{{ url_for('programs_workplan_detail', workplan_id=w.id) }}" class="text-decoration-none fw-bold" style="color:#6f42c1;font-size:0.85rem;">{{ w.title }}</a>
            </td>
            <td style="font-size:0.82rem;">{{ w.project.name[:25] }}</td>
            <td style="font-size:0.82rem;color:#888;">{{ w.period or '—' }}</td>
            <td>
              <span class="badge {% if w.status == 'active' %}bg-success{% elif w.status == 'completed' %}bg-secondary{% else %}bg-warning text-dark{% endif %}" style="font-size:0.7rem;">
                {{ w.status.title() }}
              </span>
            </td>
            <td style="width:90px;">
              <div style="font-size:0.72rem;color:#666;margin-bottom:2px;">{{ w.avg_progress }}%</div>
              <div class="progress" style="height:6px;"><div class="progress-bar" style="width:{{ w.avg_progress }}%;background:#6f42c1;"></div></div>
            </td>
          </tr>
          {% endfor %}
          </tbody>
        </table>
        {% else %}
        <div class="text-center py-4 text-muted">
          <i class="bi bi-clipboard2-data" style="font-size:2rem;opacity:0.3;display:block;"></i>
          <p class="mt-2 mb-0" style="font-size:0.82rem;">No workplans yet — select a project to create one</p>
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="col-md-5">
    <div class="card">
      <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-calendar-event-fill me-2" style="color:#20c997;"></i>Upcoming Events</span>
        <a href="{{ url_for('programs_events') }}" class="btn btn-sm btn-outline-primary" style="font-size:0.78rem;">All Events</a>
      </div>
      <div class="card-body p-0">
        {% if upcoming_events %}
        {% for ev in upcoming_events %}
        <div class="d-flex align-items-center gap-3 px-3 py-3 border-bottom">
          <div class="text-center" style="min-width:44px;background:{{ ev.color or '#6f42c1' }};border-radius:8px;padding:6px 8px;">
            <div style="font-size:0.65rem;color:rgba(255,255,255,0.8);text-transform:uppercase;font-weight:600;">{{ ev.start_datetime.strftime('%b') }}</div>
            <div style="font-size:1.1rem;color:#fff;font-weight:700;line-height:1;">{{ ev.start_datetime.strftime('%d') }}</div>
          </div>
          <div class="flex-grow-1">
            <div style="font-size:0.87rem;font-weight:600;color:#1a2332;">{{ ev.title }}</div>
            <div style="font-size:0.72rem;color:#999;">
              <i class="bi bi-clock me-1"></i>{{ ev.start_datetime.strftime('%H:%M') }}
              {% if ev.location %}<span class="ms-2"><i class="bi bi-geo-alt me-1"></i>{{ ev.location }}</span>{% endif %}
            </div>
          </div>
          <span class="badge bg-light text-dark" style="font-size:0.65rem;">{{ ev.event_type.replace('_',' ').title() }}</span>
        </div>
        {% endfor %}
        {% else %}
        <div class="text-center py-4 text-muted">
          <i class="bi bi-calendar" style="font-size:2rem;opacity:0.3;display:block;"></i>
          <p class="mt-2 mb-0" style="font-size:0.82rem;">No upcoming events</p>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}