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

{% block content %}
<div class="pane">
  <h2 style="font-size:26px;margin-bottom:6px">Welcome back, {{ client.user.first_name|default:client.full_name }}.</h2>
  <p class="muted" style="margin-bottom:26px">Here is where everything stands today.</p>

  <div class="kpis">
    <div class="kpi"><div class="lbl">Active projects</div><div class="val">{{ active_projects|length }}</div>
      <div class="sub">of {{ projects|length }} total</div></div>
    <div class="kpi"><div class="lbl">Websites</div><div class="val">{{ websites|length }}</div>
      <div class="sub">under management</div></div>
    <div class="kpi"><div class="lbl">Paid to date</div><div class="val">{{ total_paid|naira }}</div>
      <div class="sub">across your projects</div></div>
    <div class="kpi"><div class="lbl">Outstanding</div><div class="val">{{ total_balance|naira }}</div>
      <div class="sub">{% if next_due %}due {{ next_due.due_on|date:"j M Y" }}{% else %}nothing due{% endif %}</div></div>
  </div>

  <div class="quick">
    <a href="{% url 'client_projects' %}">View projects<small>Progress and milestones</small></a>
    <a href="{% url 'client_payments' %}">Make a payment<small>Pay a balance</small></a>
    <a href="{% url 'client_invoices' %}">Invoices<small>Download or pay</small></a>
    <a href="{% url 'client_support' %}">Get support<small>Raise a ticket</small></a>
    <a href="{% url 'client_messages' %}">Message Teniola<small>Direct line</small></a>
  </div>

  <div class="panel">
    <div class="panel-h"><h2>Active projects</h2><a href="{% url 'client_projects' %}" class="btn btn-sm act">See all</a></div>
    {% for p in active_projects %}
    <div style="padding:16px 18px;border-bottom:1px solid var(--line-soft)">
      <div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px">
        <a href="{% url 'client_project' p.slug %}" style="font-size:16px;font-weight:500">{{ p.name }}</a>
        <span class="status {{ p.get_status_display|status_class }}">{{ p.get_status_display }}</span>
        <span class="status {{ p.payment_status|status_class }}">{{ p.payment_status }}</span>
        <a href="{% url 'client_project' p.slug %}" class="btn btn-sm" style="margin-left:auto">Open</a>
      </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:8px">due {{ p.deadline|date:"j M Y"|default:"no date set" }} · {{ p.amount_paid|naira }} of {{ p.budget|naira }} paid</div>
    </div>
    {% empty %}
    <div class="panel-b empty"><h3>No active projects</h3>
      <p>When a project starts you'll see its progress and milestones here.</p>
      <a href="{% url 'start_project' %}" class="btn btn-primary">Start a project</a></div>
    {% endfor %}
  </div>

  <div class="split">
    <div class="panel">
      <div class="panel-h"><h2>Recent updates</h2></div>
      <div class="panel-b"><ul class="feed">
        {% for u in updates %}
        <li><div class="ft">{{ u.created_at|date:"j M Y" }} · {{ u.project.name }}</div>
          <p><b>{{ u.title }}.</b> {{ u.body }}</p></li>
        {% empty %}<p class="muted" style="margin:0">No updates yet.</p>{% endfor %}
      </ul></div>
    </div>
    <div>
      <div class="panel">
        <div class="panel-h"><h2>Open tickets</h2></div>
        <ul class="tickets">
          {% for t in open_tickets %}
          <li><div><div class="tn"><a href="{% url 'client_ticket' t.reference %}">{{ t.subject }}</a></div>
            <div class="tm">{{ t.reference }} · {{ t.created_at|date:"j M Y" }}</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>
      {% if next_due %}
      <div class="panel">
        <div class="panel-h"><h2>Next payment due</h2></div>
        <div class="panel-b">
          <div style="font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.03em">{{ next_due.balance|naira }}</div>
          <div class="mono" style="margin:6px 0 14px">{{ next_due.number }} · due {{ next_due.due_on|date:"j M Y" }}</div>
          <a href="{% url 'client_payments' %}" class="btn btn-primary btn-block">Pay now</a>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}