{% extends 'base.html' %}
{% block title %}Klantportaal{% endblock %}
{% block body %}
<header class="portal-top">
  <div class="container d-flex justify-content-between align-items-center gap-3">
    <img src="{{ url_for('static', filename='logo.svg') }}" alt="{{ s.company_name or 'Van Emous' }}">
    <a href="{{ url_for('portal_logout') }}">Uitloggen</a>
  </div>
</header>
<div class="portal-main container">
  {% with msgs = get_flashed_messages(with_categories=true) %}
    {% for cat, m in msgs %}<div class="flash {{ cat }}">{{ m }}</div>{% endfor %}
  {% endwith %}
  <div class="head"><div><div class="kicker">Klantportaal</div><h1>Welkom, {{ c.name }}</h1></div></div>

  <div class="card"><div class="card-body">
    <h2>Uw offertes</h2>
    {% if quotes %}
    <div class="table-responsive"><table class="table table-hover table-stack">
      <thead><tr><th>Nummer</th><th>Onderwerp</th><th>Datum</th><th>Status</th><th class="num">Totaal incl. btw</th></tr></thead>
      <tbody>
      {% for qt in quotes %}
        <tr class="link" onclick="location='{{ url_for('portal_quote', qid=qt.id) }}'">
          <td class="stack-title"><a href="{{ url_for('portal_quote', qid=qt.id) }}">{{ qt.number }}</a></td>
          <td data-label="Onderwerp">{{ qt.title }}</td>
          <td data-label="Datum">{{ qt.date|dt('%d-%m-%Y') }}</td>
          <td data-label="Status"><span class="chip {{ qt.status }}">{{ 'Wacht op uw reactie' if qt.status == 'verzonden' else QSTATUS.get(qt.status) }}</span></td>
          <td data-label="Totaal incl. btw" class="num">{{ qt.total|euro }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table></div>
    {% else %}<p class="empty">Er staan nog geen offertes voor u klaar.</p>{% endif %}
  </div></div>

  <div class="row g-4 mb-4 card-grid">
    <div class="col-md-6">
      <div class="card"><div class="card-body">
        <h2>Bestanden</h2>
        {% if documents %}
        <div class="files">
          {% for d in documents %}{% set f = d.latest %}
            <div class="file">
              <a href="{{ url_for('portal_file', name=f.stored) }}" target="_blank" class="thumb">
                {% if f.mime.startswith('image/') %}<img src="{{ url_for('portal_file', name=f.stored) }}" alt="{{ f.original }}" loading="lazy">
                {% else %}{{ f.original.rsplit('.', 1)[-1][:4] if '.' in f.original else 'bestand' }}{% endif %}
              </a>
              <div class="name" title="{{ d.title }}">{{ d.title }}</div>
              {% if d.versions|length > 1 %}<div class="muted">versie {{ f.version }}</div>{% endif %}
            </div>
          {% endfor %}
        </div>
        {% endif %}
        <form method="post" action="{{ url_for('portal_upload') }}" enctype="multipart/form-data">
          <label class="form-label" for="files">Foto's of documenten delen (bijv. van uw tuin of tekeningen)</label>
          <input class="form-control" id="files" type="file" name="files" multiple required>
          <div class="actions"><button class="btn btn-outline-primary btn-sm">Uploaden</button></div>
        </form>
      </div></div>
    </div>
    <div class="col-md-6">
      <div class="card"><div class="card-body">
        <h2>Bericht sturen</h2>
        <form method="post" action="{{ url_for('portal_message') }}">
          <textarea class="form-control" name="body" required aria-label="Bericht" placeholder="Uw vraag of opmerking"></textarea>
          <div class="actions"><button class="btn btn-primary">Versturen</button></div>
        </form>
        {% for m in messages %}
          <p class="muted" style="margin:.75rem 0 0">{{ m.created_at|dt }}<br><span style="color:var(--ink);white-space:pre-line">{{ m.body[8:] }}</span></p>
        {% endfor %}
      </div></div>
    </div>
  </div>
  {% if s.company_phone or s.company_email %}
    <p class="muted">Vragen? Neem contact op: {{ [s.company_phone, s.company_email]|select|join(' · ') }}</p>
  {% endif %}
</div>
{% endblock %}