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

{% block content %}
<div class="pane">
  <a class="back" href="{% url 'admin_clients' %}">&larr; All clients</a>
  <div class="kpis">
    <div class="kpi"><div class="lbl">Projects</div><div class="val">{{ projects|length }}</div><div class="sub">all time</div></div>
    <div class="kpi"><div class="lbl">Websites</div><div class="val">{{ websites|length }}</div><div class="sub">managed</div></div>
    <div class="kpi"><div class="lbl">Paid</div><div class="val">{{ client.total_paid|naira }}</div><div class="sub">since {{ client.created_at|date:"M Y" }}</div></div>
    <div class="kpi"><div class="lbl">Balance</div><div class="val">{{ client.total_balance|naira }}</div><div class="sub">outstanding</div></div>
  </div>

  <div class="split">
    <div>
      <div class="panel">
        <div class="panel-h"><h2>Projects</h2></div>
        <div style="overflow:auto"><table>
          <tr><th>Project</th><th>Status</th><th>Progress</th><th>Budget</th><th>Paid</th></tr>
          {% for p in projects %}
          <tr class="click"><td><a href="{% url 'admin_project' p.slug %}">{{ p.name }}</a></td>
            <td><span class="status {{ p.get_status_display|status_class }}">{{ p.get_status_display }}</span></td>
            <td style="min-width:130px"><div class="bar-row"><div class="bar"><i style="width:{{ p.progress }}%"></i></div><span>{{ p.progress }}%</span></div></td>
            <td>{{ p.budget|naira }}</td><td>{{ p.amount_paid|naira }}</td></tr>
          {% empty %}<tr><td colspan="5" class="muted">No projects.</td></tr>{% endfor %}
        </table></div>
      </div>
      <div class="panel">
        <div class="panel-h"><h2>Websites</h2></div>
        <div style="overflow:auto"><table>
          <tr><th>Website</th><th>Domain</th><th>Status</th><th>Maintenance</th></tr>
          {% for w in websites %}
          <tr class="click"><td><a href="{% url 'admin_website' w.slug %}">{{ w.name }}</a></td>
            <td class="mono">{{ w.domain }}</td>
            <td><span class="status {{ w.get_status_display|status_class }}">{{ w.get_status_display }}</span></td>
            <td>{{ w.get_maintenance_status_display }}</td></tr>
          {% empty %}<tr><td colspan="4" class="muted">No websites yet.</td></tr>{% endfor %}
        </table></div>
      </div>
      <div class="panel">
        <div class="panel-h"><h2>Invoices</h2></div>
        <div style="overflow:auto"><table>
          <tr><th>Invoice</th><th>Project</th><th>Total</th><th>Balance</th><th>Status</th></tr>
          {% for i in invoices %}
          <tr><td><a href="{% url 'admin_invoice' i.number %}">{{ i.number }}</a></td><td>{{ i.project.name|default:"—" }}</td>
            <td>{{ i.total|naira }}</td><td>{{ i.balance|naira }}</td>
            <td><span class="status {{ i.get_status_display|status_class }}">{{ i.get_status_display }}</span></td></tr>
          {% empty %}<tr><td colspan="5" class="muted">No invoices.</td></tr>{% endfor %}
        </table></div>
      </div>
    </div>
    <div>
      <div class="panel">
        <div class="panel-h"><h2>Contact</h2></div>
        <div class="panel-b">
          <dl class="dl">
            <dt>Company</dt><dd>{{ client.company|default:"—" }}</dd>
            <dt>Email</dt><dd>{{ client.user.email }}</dd>
            <dt>Phone</dt><dd>{{ client.phone|default:"—" }}</dd>
            <dt>Address</dt><dd>{{ client.address|default:"—" }}</dd>
            <dt>Client since</dt><dd>{{ client.created_at|date:"M Y" }}</dd>
            <dt>Account</dt><dd><span class="status {{ client.get_status_display|status_class }}">{{ client.get_status_display }}</span></dd>
          </dl>
          <a href="{% url 'admin_client_edit' client.pk %}" class="btn btn-block" style="margin-top:16px">Edit client</a>
        <a href="{% url 'admin_messages' %}?client={{ client.pk }}" class="btn btn-block" style="margin-top:10px">Message client</a>
        </div>
      </div>
      <div class="panel">
        <div class="panel-h"><h2>Tickets</h2></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.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 tickets.</div></li>{% endfor %}
        </ul>
      </div>
    </div>
  </div>
</div>
{% endblock %}