{% extends "adminpanel/base.html" %}
{% load money %}
{% block title %}Dashboard — admin{% endblock %}
{% block heading %}Dashboard{% endblock %}

{% block content %}
<div class="pane">
  <div class="kpis">
    <div class="kpi"><div class="lbl">Total clients</div><div class="val">{{ client_count }}</div><div class="sub">on the books</div></div>
    <div class="kpi"><div class="lbl">Active projects</div><div class="val">{{ active_count }}</div><div class="sub">in flight</div></div>
    <div class="kpi"><div class="lbl">Completed</div><div class="val">{{ completed_count }}</div><div class="sub">delivered</div></div>
    <div class="kpi"><div class="lbl">Websites managed</div><div class="val">{{ website_count }}</div><div class="sub">in inventory</div></div>
  </div>
  <div class="kpis">
    <div class="kpi"><div class="lbl">Revenue collected</div><div class="val">{{ revenue|naira }}</div><div class="sub">confirmed payments</div></div>
    <div class="kpi"><div class="lbl">Pending payments</div><div class="val">{{ outstanding|naira }}</div><div class="sub">issued and unpaid</div></div>
    <div class="kpi"><div class="lbl">New leads</div><div class="val">{{ new_leads }}</div><div class="sub">not yet won</div></div>
    <div class="kpi"><div class="lbl">Open tickets</div><div class="val">{{ open_tickets }}</div><div class="sub">need a reply</div></div>
  </div>

  <div class="split">
    <div>
      <div class="panel">
        <div class="panel-h"><h2>Projects in flight</h2><a href="{% url 'admin_projects' %}" class="btn btn-sm act">All projects</a></div>
        {% for p in active_projects %}
        <div style="padding:15px 18px;border-bottom:1px solid var(--line-soft)">
          <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:9px">
            <a href="{% url 'admin_project' p.slug %}" style="font-size:15px;font-weight:500">{{ p.name }}</a>
            <span class="status {{ p.get_status_display|status_class }}">{{ p.get_status_display }}</span>
            <span class="mono" style="margin-left:auto">{{ p.deadline|date:"j M Y"|default:"no date" }}</span>
          </div>
          <div class="bar-row"><div class="bar"><i style="width:{{ p.progress }}%"></i></div><span>{{ p.progress }}%</span></div>
          <div class="mono" style="margin-top:7px">{{ p.client }} · {{ p.amount_paid|naira }} of {{ p.budget|naira }}</div>
        </div>
        {% empty %}<div class="panel-b empty"><h3>Nothing in flight</h3><p>Won leads become projects here.</p></div>{% endfor %}
      </div>

      <div class="panel">
        <div class="panel-h"><h2>New leads</h2><a href="{% url 'admin_leads' %}" class="btn btn-sm act">All leads</a></div>
        <div style="overflow:auto"><table>
          <tr><th>Lead</th><th>Type</th><th>Budget</th><th>Status</th></tr>
          {% for l in leads %}
          <tr class="click"><td><a href="{% url 'admin_lead' l.pk %}">{{ l.name }}</a><div class="mono">{{ l.company|default:l.reference }}</div></td>
            <td>{{ l.project_type }}</td><td>{{ l.budget }}</td>
            <td><span class="status {{ l.get_status_display|status_class }}">{{ l.get_status_display }}</span></td></tr>
          {% empty %}<tr><td colspan="4" class="muted">No leads yet.</td></tr>{% endfor %}
        </table></div>
      </div>

      <div class="panel">
        <div class="panel-h"><h2>Recent payments</h2><a href="{% url 'admin_payments' %}" class="btn btn-sm act">All payments</a></div>
        <div style="overflow:auto"><table>
          <tr><th>Date</th><th>Client</th><th>Amount</th><th>Reference</th></tr>
          {% for p in payments %}
          <tr><td>{{ p.paid_on|date:"j M Y" }}</td><td>{{ p.client }}</td><td>{{ p.amount|naira }}</td><td class="mono">{{ p.reference }}</td></tr>
          {% empty %}<tr><td colspan="4" class="muted">No payments recorded.</td></tr>{% endfor %}
        </table></div>
      </div>
    </div>

    <div>
      <div class="panel">
        <div class="panel-h"><h2>Needs attention</h2></div>
        <div class="panel-b">
          {% for i in overdue_invoices %}
          <div style="padding:0 0 12px;border-bottom:1px solid var(--line-soft);margin-bottom:12px">
            <div style="font-size:15px">{{ i.number }} is overdue</div>
            <div class="mono" style="margin:4px 0 8px">{{ i.client }} · {{ i.balance|naira }} · due {{ i.due_on|date:"j M" }}</div>
            <a href="{% url 'admin_invoice' i.number %}" class="btn btn-sm">Chase invoice</a></div>
          {% endfor %}
          {% for w in expiring %}
          <div style="padding:0 0 12px;border-bottom:1px solid var(--line-soft);margin-bottom:12px">
            <div style="font-size:15px">{{ w.domain }} expires {{ w.domain_expiry|date:"j M Y" }}</div>
            <div class="mono" style="margin:4px 0 8px">auto-renew {% if w.auto_renew %}on{% else %}off{% endif %}</div>
            <a href="{% url 'admin_domains' %}" class="btn btn-sm">Open domains</a></div>
          {% endfor %}
          {% if not overdue_invoices and not expiring %}<p class="muted" style="margin:0">Nothing needs chasing today.</p>{% endif %}
        </div>
      </div>

      <div class="panel">
        <div class="panel-h"><h2>Upcoming deadlines</h2></div>
        <div class="panel-b"><ul class="feed">
          {% for p in deadlines %}<li><div class="ft">{{ p.deadline|date:"j M Y" }}</div>
            <p><b>{{ p.name }}</b> — {{ p.client }}</p></li>
          {% empty %}<p class="muted" style="margin:0">No deadlines set.</p>{% endfor %}
        </ul></div>
      </div>

      <div class="panel">
        <div class="panel-h"><h2>Open tickets</h2><a href="{% url 'admin_tickets' %}" class="btn btn-sm act">All</a></div>
        <ul class="tickets">
          {% for t in tickets %}
          <li><div><div class="tn"><a href="{% url 'admin_ticket' t.reference %}">{{ t.subject }}</a></div>
            <div class="tm">{{ t.reference }} · {{ t.client }}</div></div>
            <span class="status {{ t.get_status_display|status_class }}">{{ t.get_status_display }}</span></li>
          {% empty %}<li><div class="tn muted">No open tickets.</div></li>{% endfor %}
        </ul>
      </div>

      <div class="panel">
        <div class="panel-h"><h2>Recent activity</h2></div>
        <div class="panel-b"><ul class="feed">
          {% for a in activity %}<li><div class="ft">{{ a.created_at|date:"j M Y · H:i" }}</div><p>{{ a.description }}</p></li>
          {% empty %}<p class="muted" style="margin:0">Nothing logged yet.</p>{% endfor %}
        </ul></div>
      </div>
    </div>
  </div>
</div>
{% endblock %}