{% extends "pretixcontrol/event/base.html" %}
{% load i18n %}
{% block title %}{% trans "Affiliates" %}{% endblock %}
{% block content %}
<h1>{% trans "Affiliates" %}
  <a class="btn btn-default pull-right" href="payouts.csv">{% trans "Export payouts (CSV)" %}</a>
</h1>
<p class="text-muted">{% blocktrans %}Promoters, DJs and influencers each get an <code>?aff=</code> code and any number of trackable per-channel links (Instagram story, printed-flyer QR, email blast) — so you see which channel actually sold, not just which promoter. Attribution window: {{ window }} days.{% endblocktrans %}</p>

<form method="post" action="add" class="form-inline" style="margin:1em 0;">
  {% csrf_token %}
  <input class="form-control" name="name" placeholder="{% trans 'Name (DJ Mark)' %}" required>
  <input class="form-control" name="code" placeholder="{% trans 'Code (DJ_MARK)' %}" required>
  <input class="form-control" name="commission_percent" type="number" step="0.01" placeholder="%" style="width:90px">
  <button class="btn btn-primary" type="submit">{% trans "Add affiliate" %}</button>
</form>

{% if board %}
<h3>{% trans "Leaderboard" %}</h3>
<table class="table table-condensed">
  <thead><tr><th>#</th><th>{% trans "Affiliate" %}</th><th class="text-right">{% trans "Orders" %}</th><th class="text-right">{% trans "Revenue" %}</th><th class="text-right">{% trans "Owed" %}</th></tr></thead>
  <tbody>
  {% for r in board %}
    <tr><td>{{ forloop.counter }}</td><td>{{ r.aff.name }}</td>
      <td class="text-right">{{ r.orders }}</td>
      <td class="text-right">{{ event.currency }} {{ r.revenue }}</td>
      <td class="text-right">{{ event.currency }} {{ r.commission }}</td></tr>
  {% endfor %}
  </tbody>
</table>
{% endif %}

{% for r in rows %}
<div class="panel panel-default">
  <div class="panel-heading">
    <strong>{{ r.aff.name }}</strong> · <code>{{ r.aff.code }}</code>
    <span class="pull-right">{{ r.aff.commission_percent }}% · {{ r.orders }} {% trans "orders" %} · {{ event.currency }} {{ r.revenue }}</span>
  </div>
  <div class="panel-body">
    <div class="row" style="margin-bottom:.8rem">
      <div class="col-sm-8">
        <span class="text-muted">{% trans "Commission owed" %}:</span> <strong>{{ event.currency }} {{ r.owed }}</strong>
        {% if r.paid_out %}<span class="text-muted"> · {% trans "paid" %} {{ event.currency }} {{ r.paid_out }}</span>{% endif %}
        {% if r.aff.connect_account_id %}<span class="label label-info">Stripe Connect</span>{% else %}<span class="text-muted small">({% trans "no Connect account — records for manual payout" %})</span>{% endif %}
      </div>
      <div class="col-sm-4 text-right">
        <form method="post" action="{{ r.aff.pk }}/payout" style="display:inline" onsubmit="return confirm('{% trans "Pay the owed commission now?" %}')">{% csrf_token %}
          <button class="btn btn-sm btn-success" {% if not r.owed %}disabled{% endif %}>{% trans "Pay commission" %}</button>
        </form>
      </div>
    </div>
    {% if r.payouts %}
      <div class="small text-muted" style="margin-bottom:.6rem">
        {% trans "Recent payouts" %}:
        {% for p in r.payouts %}{{ event.currency }}{{ p.amount }} <span class="label label-{% if p.status == 'paid' %}success{% elif p.status == 'failed' %}danger{% else %}default{% endif %}">{{ p.status }}</span>{% if not forloop.last %} · {% endif %}{% endfor %}
      </div>
    {% endif %}
    <div class="form-group">
      <label class="small text-muted">{% trans "Base share link" %}</label>
      <input class="form-control input-sm" value="{{ r.link }}" readonly onclick="this.select()">
    </div>

    {% if r.links %}
    <table class="table table-condensed" style="margin-bottom:.6em">
      <thead><tr><th>{% trans "Channel" %}</th><th>{% trans "Trackable link" %}</th>
        <th class="text-right">{% trans "Clicks" %}</th><th class="text-right">{% trans "Orders" %}</th>
        <th class="text-right">{% trans "Conv." %}</th><th class="text-right">{% trans "Revenue" %}</th><th></th></tr></thead>
      <tbody>
      {% for l in r.links %}
        <tr>
          <td>{{ l.ln.label|default:l.ln.slug }}<br><small class="text-muted">{{ l.ln.utm_medium|default:"referral" }}</small></td>
          <td><input class="form-control input-sm" value="{{ l.url }}" readonly onclick="this.select()">
              <a href="{{ l.url }}qr.svg" target="_blank"><small>{% trans "QR code" %}</small></a></td>
          <td class="text-right">{{ l.ln.clicks }}</td>
          <td class="text-right">{{ l.orders }}</td>
          <td class="text-right">{{ l.cr|floatformat:1 }}%</td>
          <td class="text-right">{{ event.currency }} {{ l.revenue }}</td>
          <td class="text-right"><form method="post" action="links/{{ l.ln.pk }}/delete" style="display:inline" onsubmit="return confirm('{% trans "Remove link?" %}')">{% csrf_token %}<button class="btn btn-xs btn-danger">×</button></form></td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
    {% endif %}

    <form method="post" action="links/add" class="form-inline">
      {% csrf_token %}
      <input type="hidden" name="affiliate" value="{{ r.aff.pk }}">
      <input class="form-control input-sm" name="slug" placeholder="{% trans 'slug (mark-ig-story)' %}" required>
      <input class="form-control input-sm" name="label" placeholder="{% trans 'label' %}">
      <input class="form-control input-sm" name="utm_medium" placeholder="{% trans 'utm_medium' %}" style="width:120px">
      <button class="btn btn-sm btn-default">{% trans "Add trackable link" %}</button>
    </form>
  </div>
</div>
{% empty %}
<div class="well">{% trans "No affiliates yet. Add one above, then give them trackable per-channel links." %}</div>
{% endfor %}
{% endblock %}