{% extends 'base.html' %}
{% block title %}{{ r.name }}{% endblock %}
{% block content %}
<div class="head">
  <div>
    <a class="label" href="{{ url_for('relations', kind=r.kind) }}">← {{ 'Klanten' if r.kind == 'klant' else 'Partners' }}</a>
    <h1>{{ r.name }}</h1>
    <div class="muted"><span class="chip">{{ RKIND.get(r.kind) }}</span> {{ [r.type, r.city]|select|join(' · ') }}</div>
  </div>
  <div class="actions">
    {% if r.kind == 'klant' and members %}
    <form method="post" action="{{ url_for('quote_new') }}" class="inline">
      <input type="hidden" name="contact_id" value="{{ members[0].id }}">
      <button class="btn btn-outline-primary">Nieuwe offerte</button>
    </form>
    {% endif %}
    <a class="btn btn-primary" href="{{ url_for('relation_edit', rid=r.id) }}">Bewerken</a>
  </div>
</div>

<div class="row gx-4 stack">
  <div class="col-lg-7 col-xl-8">
    <div class="card o-2"><div class="card-body">
      <h2>Contactpersonen</h2>
      <div class="members">
        {% for m in members %}
          <div class="member">
            <div>
              <a href="{{ url_for('contact_view', cid=m.id) }}">{{ m.name }}</a>
              {% if m.relation_role %}<span class="muted">· {{ m.relation_role }}</span>{% endif %}
              <div class="muted" style="overflow-wrap:anywhere">{{ [m.email, m.phone]|select|join(' · ') }}</div>
            </div>
            <div class="d-flex align-items-center gap-3">
              {% if m.type != 'partner' %}<span class="chip {{ m.status }}">{{ STATUS.get(m.status) }}</span>{% endif %}
              <form method="post" action="{{ url_for('relation_member_remove', rid=r.id, cid=m.id) }}" class="inline" onsubmit="return confirm('{{ m.name }} loskoppelen van {{ r.name }}?')">
                <button class="linkbtn">Loskoppelen</button>
              </form>
            </div>
          </div>
        {% else %}
          <p class="empty">Nog geen contactpersonen.</p>
        {% endfor %}
      </div>
      <form method="post" action="{{ url_for('relation_member', rid=r.id) }}" class="row g-2 align-items-center mt-3">
        {% if candidates %}
        <div class="col-md">
          <select class="form-select" name="contact_id" aria-label="Bestaand contact" required>
            <option value="">Bestaand contact toevoegen…</option>
            {% for c in candidates %}<option value="{{ c.id }}">{{ c.name }}{% if c.email %} ({{ c.email }}){% endif %}</option>{% endfor %}
          </select>
        </div>
        <div class="col-8 col-md-3"><input class="form-control" name="relation_role" placeholder="Rol" aria-label="Rol"></div>
        <div class="col-4 col-md-auto"><button class="btn btn-outline-primary w-100">Toevoegen</button></div>
        {% endif %}
        <div class="col-12"><a class="btn btn-primary btn-sm" href="{{ url_for('contact_new', relation_id=r.id, company=r.name if r.kind == 'partner' else None) }}">Nieuwe contactpersoon</a></div>
      </form>
    </div></div>

    {% if designs %}
    <div class="card"><div class="card-body">
      <h2>Ontwerpen en tekeningen</h2>
      <div class="table-responsive"><table class="table table-stack">
        <thead><tr><th>Ontwerp</th><th>Contact</th><th>Tekeningen</th><th>Ontvangen</th></tr></thead>
        <tbody>
        {% for d in designs %}{% set p = pdfs.get(d.id, {}) %}
          <tr>
            <td class="stack-title"><a href="{{ url_for('design_viewer', fid=d.id) }}" target="_blank">{{ d.title }}</a>{% if d.chosen %} <span class="chip">Gekozen model</span>{% endif %}</td>
            <td data-label="Contact"><a href="{{ url_for('contact_view', cid=d.contact_id) }}">{{ d.contact_name }}</a></td>
            <td data-label="Tekeningen"><span>{% for k, label in PDF_KINDS.items() %}{% if p.get(k) %}<a href="{{ p[k].url }}" target="_blank">{{ (label[:1]|upper) ~ label[1:] }}</a>{% if not loop.last %} · {% endif %}{% endif %}{% endfor %}
              {% if not p %}<span class="muted">Wordt gemaakt bij openen van het contact</span>{% endif %}</span></td>
            <td data-label="Ontvangen" class="muted">{{ d.created_at|dt('%d-%m-%Y') }}</td>
          </tr>
        {% endfor %}
        </tbody>
      </table></div>
    </div></div>
    {% endif %}

    {% if r.kind == 'partner' %}
    <div class="card"><div class="card-body">
      <h2>Producten van deze leverancier</h2>
      {% if products %}
      <div class="table-responsive"><table class="table table-hover table-stack">
        <thead><tr><th>SKU</th><th>Naam</th><th class="num">Prijs excl.</th><th>Bijgewerkt</th></tr></thead>
        <tbody>
        {% for p in products %}
          <tr class="link" onclick="location='{{ url_for('product_edit', pid=p.id) }}'">
            <td data-label="SKU"><code>{{ p.sku }}</code></td>
            <td class="stack-title"><a href="{{ url_for('product_edit', pid=p.id) }}">{{ p.name }}</a>{% if not p.active %} <span class="chip verloren">Inactief</span>{% endif %}</td>
            <td data-label="Prijs excl." class="num">{{ p.price|euro }}</td>
            <td data-label="Bijgewerkt" class="muted">{{ (p.updated_at or p.created_at)|dt('%d-%m-%Y') }}</td>
          </tr>
        {% endfor %}
        </tbody>
      </table></div>
      {% else %}<p class="empty">Nog geen producten gekoppeld. Vul deze naam in als leverancier bij een product of in een import.</p>{% endif %}
    </div></div>
    {% endif %}

    <div class="card"><div class="card-body">
      <h2>Recente activiteit</h2>
      <ul class="timeline">
        {% for a in activities %}
          <li>
            <div class="meta">{{ ACT.get(a.type, a.type) }} · <a href="{{ url_for('contact_view', cid=a.contact_id) }}">{{ a.contact_name }}</a> · {{ a.created_at|dt }}{% if a.user_name %} · {{ a.user_name }}{% endif %}</div>
            <div class="body">{{ a.body }}</div>
          </li>
        {% else %}
          <li class="empty">Nog geen activiteit.</li>
        {% endfor %}
      </ul>
    </div></div>
  </div>

  <div class="col-lg-5 col-xl-4">
    <div class="card o-1"><div class="card-body">
      <h2>Gegevens</h2>
      <dl class="props">
        {% if r.type %}<dt>Type</dt><dd>{{ r.type }}</dd>{% endif %}
        {% if r.email %}<dt>E-mail</dt><dd><a href="mailto:{{ r.email }}">{{ r.email }}</a></dd>{% endif %}
        {% if r.phone %}<dt>Telefoon</dt><dd><a href="tel:{{ r.phone }}">{{ r.phone }}</a></dd>{% endif %}
        {% if r.address or r.city %}<dt>Adres</dt><dd>{{ [r.address, (r.postcode ~ ' ' ~ r.city)|trim]|select|join('\n') }}</dd>{% endif %}
        {% if r.website %}<dt>Website</dt><dd><a href="{{ r.website if r.website.startswith('http') else 'https://' ~ r.website }}" target="_blank" rel="noopener">{{ r.website }}</a></dd>{% endif %}
        {% if r.kvk %}<dt>KvK</dt><dd>{{ r.kvk }}</dd>{% endif %}
        <dt>Aangemaakt</dt><dd>{{ r.created_at|dt('%d-%m-%Y') }}</dd>
      </dl>
      {% if r.notes %}<h3>Notities</h3><p style="white-space:pre-line;margin:0">{{ r.notes }}</p>{% endif %}
    </div></div>

    {% if tasks %}
    <div class="card"><div class="card-body">
      <h2>Open 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">{{ t.contact_name }}{% if t.due_date %} · <span class="{{ 'overdue' if t.due_date < today }}">{{ t.due_date|dt('%d-%m-%Y') }}</span>{% endif %}</div></div>
        </form>
      {% endfor %}
    </div></div>
    {% endif %}

    {% if r.kind == 'klant' %}
    <div class="card"><div class="card-body">
      <h2>Offertes</h2>
      {% for qt in quotes %}
        <p style="margin:0 0 .6rem"><a href="{{ url_for('quote_edit', qid=qt.id) }}">{{ qt.number }}</a> <span class="chip {{ qt.status }}">{{ QSTATUS.get(qt.status) }}</span><br>
        <span class="muted">{{ qt.contact_name }} · {{ qt.date|dt('%d-%m-%Y') }} · {{ qt.total|euro }}</span></p>
      {% else %}
        <p class="empty">Nog geen offertes.</p>
      {% endfor %}
    </div></div>
    {% endif %}
  </div>
</div>
{% endblock %}