{% extends 'base.html' %}
{% block page_title %}Program Events{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <div>
    <h4 class="fw-bold mb-1">Program Events</h4>
    <p class="text-muted mb-0" style="font-size:0.85rem;">Manage workshops, trainings, field visits, and meetings</p>
  </div>
  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addEventModal">
    <i class="bi bi-plus-lg me-2"></i>New Event
  </button>
</div>

<!-- FILTER -->
<div class="card mb-4">
  <div class="card-body py-2 px-3">
    <form class="d-flex align-items-center gap-3" method="GET">
      <span style="font-size:0.82rem;font-weight:500;color:#555;white-space:nowrap;">Filter by Project:</span>
      <select name="project_id" class="form-select form-select-sm" style="max-width:300px;" onchange="this.form.submit()">
        <option value="">All Projects</option>
        {% for p in projects %}
        <option value="{{ p.id }}" {% if filter_project|string == p.id|string %}selected{% endif %}>{{ p.name }}</option>
        {% endfor %}
      </select>
    </form>
  </div>
</div>

<!-- UPCOMING -->
<div class="card mb-4">
  <div class="card-header">
    <span class="fw-bold" style="font-size:0.9rem;"><i class="bi bi-calendar-check me-2" style="color:#20c997;"></i>Upcoming Events ({{ upcoming|length }})</span>
  </div>
  <div class="card-body p-0">
    {% if upcoming %}
    {% for ev in upcoming %}
    <div class="d-flex align-items-center gap-3 px-3 py-3 border-bottom">
      <div class="text-center" style="min-width:52px;background:{{ ev.color or '#6f42c1' }};border-radius:10px;padding:8px 10px;">
        <div style="font-size:0.6rem;color:rgba(255,255,255,0.85);text-transform:uppercase;font-weight:600;">{{ ev.start_datetime.strftime('%b') }}</div>
        <div style="font-size:1.2rem;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.9rem;font-weight:600;color:#1a2332;">{{ ev.title }}</div>
        <div style="font-size:0.75rem;color:#999;">
          <i class="bi bi-clock me-1"></i>{{ ev.start_datetime.strftime('%H:%M') }}
          {% if ev.end_datetime %} — {{ ev.end_datetime.strftime('%H:%M') }}{% endif %}
          {% if ev.location %}<span class="ms-2"><i class="bi bi-geo-alt me-1"></i>{{ ev.location }}</span>{% endif %}
          {% if ev.project %}<span class="ms-2"><i class="bi bi-folder me-1"></i>{{ ev.project.name }}</span>{% endif %}
        </div>
        {% if ev.description %}<div style="font-size:0.78rem;color:#777;margin-top:2px;">{{ ev.description[:100] }}{% if ev.description|length > 100 %}…{% endif %}</div>{% endif %}
      </div>
      <div class="d-flex flex-column align-items-end gap-1">
        <span class="badge bg-light text-dark" style="font-size:0.65rem;">{{ ev.event_type.replace('_',' ').title() }}</span>
        {% if ev.creator %}<span style="font-size:0.68rem;color:#aaa;">by {{ ev.creator.name }}</span>{% endif %}
      </div>
    </div>
    {% endfor %}
    {% else %}
    <div class="text-center py-4 text-muted">
      <i class="bi bi-calendar-check" 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>

<!-- PAST -->
{% if past %}
<div class="card">
  <div class="card-header">
    <span class="fw-bold" style="font-size:0.9rem;"><i class="bi bi-clock-history me-2" style="color:#999;"></i>Past Events ({{ past|length }})</span>
  </div>
  <div class="card-body p-0">
    {% for ev in past %}
    <div class="d-flex align-items-center gap-3 px-3 py-3 border-bottom" style="opacity:0.7;">
      <div class="text-center" style="min-width:52px;background:#6c757d;border-radius:10px;padding:8px 10px;">
        <div style="font-size:0.6rem;color:rgba(255,255,255,0.85);text-transform:uppercase;font-weight:600;">{{ ev.start_datetime.strftime('%b') }}</div>
        <div style="font-size:1.2rem;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.9rem;font-weight:600;color:#1a2332;">{{ ev.title }}</div>
        <div style="font-size:0.75rem;color:#999;">
          <i class="bi bi-clock me-1"></i>{{ ev.start_datetime.strftime('%d %b %Y, %H:%M') }}
          {% if ev.location %}<span class="ms-2"><i class="bi bi-geo-alt me-1"></i>{{ ev.location }}</span>{% endif %}
          {% if ev.project %}<span class="ms-2"><i class="bi bi-folder me-1"></i>{{ ev.project.name }}</span>{% endif %}
        </div>
      </div>
      <span class="badge bg-light text-dark" style="font-size:0.65rem;">{{ ev.event_type.replace('_',' ').title() }}</span>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

<!-- ADD EVENT MODAL -->
<div class="modal fade" id="addEventModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form method="POST" action="{{ url_for('programs_event_add') }}">
        <div class="modal-header">
          <h6 class="modal-title fw-bold"><i class="bi bi-calendar-plus me-2"></i>New Program Event</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">Event Title *</label>
              <input type="text" name="title" class="form-control" required placeholder="e.g. Community Workshop">
            </div>
            <div class="col-md-4">
              <label class="form-label">Event Type</label>
              <select name="event_type" class="form-select">
                <option value="meeting">Meeting</option>
                <option value="workshop">Workshop</option>
                <option value="training">Training</option>
                <option value="field_visit">Field Visit</option>
                <option value="deadline">Deadline</option>
                <option value="other">Other</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">Start Date &amp; Time *</label>
              <input type="datetime-local" name="start_datetime" class="form-control" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">End Date &amp; Time</label>
              <input type="datetime-local" name="end_datetime" class="form-control">
            </div>
            <div class="col-md-6">
              <label class="form-label">Location</label>
              <input type="text" name="location" class="form-control" placeholder="e.g. Conference Room B">
            </div>
            <div class="col-md-6">
              <label class="form-label">Linked Project</label>
              <select name="project_id" class="form-select">
                <option value="">— No project —</option>
                {% for p in projects %}
                <option value="{{ p.id }}">{{ p.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label">Color</label>
              <input type="color" name="color" class="form-control form-control-color w-100" value="#6f42c1">
            </div>
            <div class="col-md-4">
              <div class="form-check mt-4">
                <input type="checkbox" class="form-check-input" name="all_day" id="all_day">
                <label class="form-check-label" for="all_day">All Day Event</label>
              </div>
            </div>
            <div class="col-12">
              <label class="form-label">Description</label>
              <textarea name="description" class="form-control" rows="3" placeholder="Event details..."></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-calendar-plus me-1"></i>Create Event</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}