{% extends 'base.html' %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<div class="head">
  <div><div class="kicker">Overzicht</div><h1>Dashboard</h1></div>
  <div class="actions"><a class="btn btn-primary" href="{{ url_for('contact_new') }}">Nieuw contact</a></div>
</div>

<div class="row g-3 mb-4">
  <div class="col-sm-6 col-xl-3"><div class="kpi"><div class="label">Nieuwe leads · 30 dagen</div><div class="value">{{ stats.new30 }}</div><div class="muted">{{ stats.customers }} klantrelaties · {{ stats.partners }} partners</div></div></div>
  <div class="col-sm-6 col-xl-3"><div class="kpi"><div class="label">Open leads</div><div class="value">{{ stats.open_leads }}</div>
    <div class="muted">{{ stats.pipeline_value|euro }} verwacht{% if stats.unassigned %} · <a href="{{ url_for('contacts', type='lead', owner='none') }}">{{ stats.unassigned }} niet toegewezen</a>{% endif %}</div></div></div>
  <div class="col-sm-6 col-xl-3"><div class="kpi"><div class="label">Open offertes</div><div class="value">{{ stats.open_quotes }}</div><div class="muted">{{ stats.open_value|euro }} excl. btw</div></div></div>
  <div class="col-sm-6 col-xl-3"><div class="kpi"><div class="label">Gewonnen · 30 dagen</div><div class="value">{{ stats.won_value|euro }}</div><div class="muted">excl. btw</div></div></div>
</div>

<div class="row g-4 mb-4 card-grid">
  <div class="col-md-6 col-xxl-4">
    <div class="card"><div class="card-body">
      <h2>Leads per status</h2>
      <div class="bars">
        {% for key, label, n in pipeline %}
        <a class="bar" href="{{ url_for('contacts', type='lead', status=key) }}">
          <span>{{ label }}</span>
          <span class="track"><span class="fill" style="width: {{ (n / pipe_max * 100)|round(1) }}%"></span></span>
          <span class="num">{{ n }}</span>
        </a>
        {% endfor %}
      </div>
    </div></div>
  </div>
  <div class="col-md-6 col-xxl-4">
    <div class="card"><div class="card-body">
      <h2>Leads per week</h2>
      <div class="cols">
        {% for wk, n in weekly %}
        <div title="Week {{ wk }}: {{ n }} lead(s)">
          <span>{{ n or '' }}</span>
          <span class="c" style="height: {{ (n / week_max * 75)|round(1) }}%"></span>
          <span>{{ wk }}</span>
        </div>
        {% endfor %}
      </div>
    </div></div>
  </div>
  <div class="col-md-12 col-xxl-4">
    <div class="card"><div class="card-body">
      <h2>Bronnen</h2>
      {% if sources %}
      <div class="bars">
        {% for s in sources %}
        <div class="bar">
          <span title="{{ s.s }}">{{ s.s }}</span>
          <span class="track"><span class="fill" style="width: {{ (s.n / source_max * 100)|round(1) }}%"></span></span>
          <span class="num">{{ s.n }}</span>
        </div>
        {% endfor %}
      </div>
      {% else %}<p class="empty">Nog geen leads.</p>{% endif %}
    </div></div>
  </div>
</div>

<div class="row gx-4">
  <div class="col-xl-8">
    <div class="card"><div class="card-body">
      <h2>Laatste leads</h2>
      {% if recent %}
      <div class="table-responsive"><table class="table table-hover table-stack">
        <thead><tr><th>Naam</th><th>Bron</th><th>Toegewezen</th><th>Status</th><th>Binnen</th></tr></thead>
        <tbody>
        {% for c in recent %}
          <tr class="link" onclick="location='{{ url_for('contact_view', cid=c.id) }}'">
            <td class="stack-title"><a href="{{ url_for('contact_view', cid=c.id) }}">{{ c.name }}</a><div class="muted">{{ c.email }}</div></td>
            <td data-label="Bron">{{ c.source }}</td>
            <td data-label="Toegewezen">{{ c.user_name or '—' }}</td>
            <td data-label="Status"><span class="chip {{ c.status }}">{{ STATUS.get(c.status, c.status) }}</span></td>
            <td data-label="Binnen" class="muted">{{ c.created_at|dt }}</td>
          </tr>
        {% endfor %}
        </tbody>
      </table></div>
      {% else %}<p class="empty">Nog geen contacten. Voeg er een toe of koppel een formulier via Instellingen.</p>{% endif %}
    </div></div>
  </div>
  <div class="col-xl-4">
    <div class="card"><div class="card-body">
      <h2>Mijn taken</h2>
      {% for t in tasks %}
        <form method="post" action="{{ url_for('task_done', tid=t.id) }}" class="task">
          <button class="check" aria-label="Afronden"></button>
          <div><div>{{ t.title }}</div>
            <div class="muted">{% if t.contact_id %}<a href="{{ url_for('contact_view', cid=t.contact_id) }}">{{ t.contact_name }}</a>{% endif %}
            {% if t.due_date %}· <span class="{{ 'overdue' if t.due_date < today }}">{{ t.due_date|dt('%d-%m-%Y') }}</span>{% endif %}</div></div>
        </form>
      {% else %}
        <p class="empty">Geen openstaande taken.</p>
      {% endfor %}
    </div></div>
    <div class="card"><div class="card-body">
      <div class="card-top"><h2>Mijn agenda</h2><div class="actions"><a class="btn btn-outline-primary btn-sm" href="{{ url_for('calendar_view') }}">Agenda</a></div></div>
      {% for i in agenda %}
        <div class="agenda-row"><div class="when">{{ 'Vandaag' if i.start.date().isoformat() == today else i.when.split(' ')[:3]|join(' ') }}{% if not i.all_day %}<br>{{ i.start.strftime('%H:%M') }}{% endif %}</div>
          <div><a href="{{ i.url }}">{{ i.title }}</a>{% if i.contact %}<div class="muted">{{ i.contact }}</div>{% endif %}</div></div>
      {% else %}
        <p class="empty">Geen afspraken de komende 7 dagen.</p>
      {% endfor %}
    </div></div>
    <div class="card"><div class="card-body">
      <h2>Ongelezen e-mail</h2>
      {% for e in mails %}
        <p><a href="{{ url_for('inbox_view', eid=e.id) }}">{{ e.subject }}</a><br><span class="muted">{{ e.from_name or e.from_addr }} · {{ e.date|dt }}</span></p>
      {% else %}
        <p class="empty">Geen ongelezen berichten.</p>
      {% endfor %}
      <a href="{{ url_for('inbox') }}">Naar inbox</a>
    </div></div>
  </div>
</div>
{% endblock %}