{% extends "layout.html" %}
{% block title %}CRM dashboard{% endblock %}
{% block content %}
<div class="page-intro page-banner">
  <div>
    <p class="eyebrow">Overview</p>
    <h1>Dashboard</h1>
  </div>
  <p class="sub">Your sales picture for the {{ total|num }} schools shared with you.</p>
</div>

<div class="kpis">
  <div class="kpi"><span>Schools</span><b>{{ total|num }}</b></div>
  <div class="kpi"><span>Worked on</span><b>{{ worked|num }}</b></div>
  <div class="kpi"><span>Reached</span><b>{{ contacted|num }}</b></div>
  <a class="kpi {{ 'bad' if overdue }}" href="{{ url('crm_followups') }}?owner=all"><span>Overdue follow-ups</span><b>{{ overdue|num }}</b></a>
  <a class="kpi" href="{{ url('crm_followups') }}?owner=all"><span>Due today</span><b>{{ due_today|num }}</b></a>
  <a class="kpi good" href="{{ url('crm_myleads') }}"><span>My leads</span><b>{{ my_leads_total|num }}</b></a>
  <div class="kpi"><span>Open pipeline value</span><b>{{ pipeline|num }}</b></div>
</div>

<div class="cols2">
  <section class="panel">
    <div class="panel-header">
      <h2>Pipeline</h2>
      <span class="panel-tag">Overview</span>
    </div>
    {% for f in funnel %}
    <div class="frow"><span class="fl"><span class="pill st-{{ f.key }}">{{ f.label }}</span></span>
      <span class="fbar"><i style="width:{{ f.pct }}%"></i></span><b>{{ f.n|num }}</b></div>
    {% endfor %}
  </section>

  <section class="panel">
    <div class="panel-header">
      <h2>My follow-ups due</h2>
      <a class="mini-link" href="{{ url('crm_followups') }}?owner=mine">View all</a>
    </div>
    {% if my_due %}
    <ul class="list">{% for l in my_due %}
      <li>
        <div class="list-title"><a href="{{ url('school_crm', kwargs={'org_id': l.school.organization_id}) }}">{{ l.school.name }}</a></div>
        <div class="meta-line"><span class="mute">{{ l.school.municipality }}</span></div>
        <div class="meta-line"><span class="due {{ 'late' if l.next_followup < today }}">{{ l.next_followup|dt }}</span></div>
        {% if l.next_action %}<div class="mute note-inline">{{ l.next_action }}</div>{% endif %}
      </li>
    {% endfor %}</ul>
    {% else %}<p class="mute">Nothing due. Nice.</p>{% endif %}
  </section>

  <section class="panel">
    <div class="panel-header">
      <h2>High priority, never reached</h2>
    </div>
    {% if hot_untouched %}
    <ul class="list">{% for l in hot_untouched %}
      <li>
        <div class="list-title"><a href="{{ url('school_crm', kwargs={'org_id': l.school.organization_id}) }}">{{ l.school.name }}</a></div>
        <div class="meta-line"><span class="mute">{{ l.school.municipality }}</span></div>
        <div class="meta-line"><span class="pill st-{{ l.stage }}">{{ STAGE_LABELS[l.stage] }}</span></div>
      </li>
    {% endfor %}</ul>
    {% else %}<p class="mute">None. Mark leads as high priority from the school list.</p>{% endif %}
  </section>

  <section class="panel">
    <div class="panel-header">
      <h2>Team activity</h2>
      <span class="panel-tag">7 days</span>
    </div>
    {% if team %}
    <table class="mini"><tbody>{% for t in team %}
      <tr><td>{{ t.created_by__username or 'unknown' }}</td><td class="n">{{ t.n }}</td></tr>
    {% endfor %}</tbody></table>
    {% else %}<p class="mute">No calls or visits logged yet.</p>{% endif %}
  </section>
</div>

<section class="panel">
  <div class="panel-header">
    <h2>Recent activity</h2>
  </div>
  {% if recent %}
  <ul class="timeline">{% for a in recent %}
    <li class="{{ 'sys' if a.is_system }}">
      <div class="when">{{ a.occurred_at|dt }} · {{ a.created_by.username if a.created_by else 'system' }}</div>
      <div><strong>{{ KIND_LABELS[a.kind] }}</strong> on
        <a href="{{ url('school_crm', kwargs={'org_id': a.lead.school.organization_id}) }}">{{ a.lead.school.name }}</a>
        {% if a.outcome %}<span class="mute">({{ OUTCOME_LABELS[a.outcome] }})</span>{% endif %}</div>
      {% if a.notes %}<div class="note">{{ a.notes }}</div>{% endif %}
    </li>{% endfor %}</ul>
  {% else %}<p class="mute">Nothing logged yet. Open a school and log your first call.</p>{% endif %}
</section>
{% endblock %}