{% extends "layout.html" %}
{% block title %}{{ school.name }}{% endblock %}

{% macro field(f) %}
<div class="fld{{ ' has-err' if f.errors }}">
  <label for="{{ f.id_for_label }}">{{ f.label }}</label>
  {{ f }}
  {% for e in f.errors %}<div class="ferr">{{ e }}</div>{% endfor %}
</div>
{% endmacro %}

{% block content %}
<p class="crumb"><a href="{{ url('index') }}">← All schools</a></p>
<div class="shead page-banner">
  <div>
    <h1>{{ school.name }}</h1>
    <div class="mute">{{ data.get('organizationCode', '') }} · {{ school.municipality }}{% if school.district_name %}, {{ school.district_name }}{% endif %}</div>
  </div>
  <div class="badges">
    <span class="pill st-{{ stage }}">{{ STAGE_LABELS[stage] }}</span>
    <span class="pill pr-{{ lead.priority if lead and lead.priority else '' }}">{{ PRIORITY_LABELS.get((lead.priority if lead else '') or '', '-') }} priority</span>
  </div>
</div>

<div class="kpis small">
  <div class="kpi"><span>Last reached</span><b>{{ lead.last_contacted_at|ago if lead else 'never' }}</b></div>
  <div class="kpi"><span>Attempts</span><b>{{ lead.attempts if lead else 0 }}</b></div>
  <div class="kpi {{ 'bad' if lead and lead.next_followup and lead.next_followup < today }}"><span>Next follow-up</span><b>{{ lead.next_followup|dt if lead and lead.next_followup else '-' }}</b></div>
  <div class="kpi"><span>Owner</span><b>{{ lead.owner.username if lead and lead.owner else 'Unassigned' }}</b></div>
</div>

<div class="cols2 top">
  <div class="stack">
    <section class="panel">
      <h2>Lead status &amp; activity</h2>
      {% if crm_can_edit %}
      <form method="post" action="{{ url('crm_save_lead', kwargs={'org_id': school.organization_id}) }}">
        {{ csrf_input }}
        {% for e in lead_form.non_field_errors() %}<div class="ferr">{{ e }}</div>{% endfor %}
        <h3>Status and follow-up</h3>
        <div class="fgrid">
          {{ field(lead_form.stage) }}{{ field(lead_form.priority) }}
          {{ field(lead_form.owner) }}{{ field(lead_form.deal_value) }}
          {{ field(lead_form.next_followup) }}{{ field(lead_form.next_action) }}
        </div>
        <div id="lost-wrap">{{ field(lead_form.lost_reason) }}</div>
        <div class="activity-entry">
          <h3>Record an activity <span class="mute">Optional</span></h3>
          <p class="mute">Add a call, visit, or note here while updating the lead. Leave this blank for a status-only change.</p>
          <div class="fgrid">
            {{ field(lead_form.activity_kind) }}{{ field(lead_form.activity_outcome) }}
            {{ field(lead_form.activity_occurred_at) }}
          </div>
          {{ field(lead_form.activity_notes) }}
        </div>
        <button class="pri" type="submit">Save lead and activity</button>
      </form>
      {% else %}
      <dl class="kv">
        <div><dt>Stage</dt><dd>{{ STAGE_LABELS[stage] }}</dd></div>
        <div><dt>Priority</dt><dd>{{ PRIORITY_LABELS.get((lead.priority if lead else '') or '', '-') }}</dd></div>
        <div><dt>What to do next</dt><dd>{{ lead.next_action if lead and lead.next_action else '-' }}</dd></div>
      </dl>
      <p class="mute">You have view-only CRM access.</p>
      {% endif %}
    </section>

    <section class="panel">
      <h2>People at this school</h2>
      {% if people %}
      <ul class="list">{% for p in people %}
        <li><strong>{{ p.name }}</strong>{% if p.is_primary %} <span class="pill">Main</span>{% endif %}
          {% if p.role %}<span class="mute"> · {{ p.role }}</span>{% endif %}
          <div>{% if p.phone %}<a href="tel:{{ p.phone }}">{{ p.phone }}</a>{% endif %}
            {% if p.email %} · <a href="mailto:{{ p.email }}">{{ p.email }}</a>{% endif %}</div>
          {% if crm_can_edit %}
          <form method="post" action="{{ url('crm_delete_contact', kwargs={'pk': p.pk}) }}" class="inline">
            {{ csrf_input }}<button class="link" type="submit" onclick="return confirm('Remove this person?')">Remove</button>
          </form>{% endif %}
        </li>{% endfor %}</ul>
      {% else %}<p class="mute">No extra contacts yet.</p>{% endif %}
      {% if crm_can_edit %}
      <details><summary>Add a person</summary>
        <form method="post" action="{{ url('crm_add_contact', kwargs={'org_id': school.organization_id}) }}">
          {{ csrf_input }}
          <div class="fgrid">{{ field(contact_form.name) }}{{ field(contact_form.role) }}
            {{ field(contact_form.phone) }}{{ field(contact_form.email) }}</div>
          <label class="chk">{{ contact_form.is_primary }} Main contact</label>
          <button type="submit">Add person</button>
        </form>
      </details>{% endif %}
    </section>
  </div>

  <div class="stack">
    <section class="panel">
      <h2>Timeline</h2>
      {% if activities %}
      <ul class="timeline">{% for a in activities %}
        <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>{% 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">No activity yet. Log your first call or visit.</p>{% endif %}
    </section>

    <section class="panel">
      <h2>School details</h2>
      <dl class="kv">{% for k, v in facts %}
        <div><dt>{{ k|label }}</dt><dd>
          {% if k == 'contactNumber' %}<a href="tel:{{ v }}">{{ v }}</a>
          {% elif k == 'email' %}<a href="mailto:{{ v }}">{{ v }}</a>
          {% else %}{{ v }}{% endif %}</dd></div>{% endfor %}</dl>
      {% if classes %}
      <h3>Students by class</h3>
      <div class="tiles">{% for k, v in classes %}<div class="tile"><span>{{ k|label }}</span><b>{{ v }}</b></div>{% endfor %}</div>
      {% endif %}
      {% if others %}
      <details><summary>More details ({{ others|length }})</summary>
        <dl class="kv">{% for k, v in others %}<div><dt>{{ k|label }}</dt><dd>{{ 'Yes' if v is sameas true else ('No' if v is sameas false else v) }}</dd></div>{% endfor %}</dl>
      </details>{% endif %}
    </section>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function(){
  var st = document.getElementById("id_stage"), wrap = document.getElementById("lost-wrap");
  if(!st || !wrap) return;
  function sync(){ wrap.hidden = st.value !== "lost"; }
  st.addEventListener("change", sync); sync();
})();
</script>
{% endblock %}