{% extends "base.html" %}
{% block title %}{{ t('CRM Pipeline') }}{% endblock %}
{% block content %}
<div class="page-head">
  <h1>{{ t('CRM Pipeline') }}</h1>
  {% if can_write %}<div class="actions"><a class="btn" href="{{ url_for('crm.lead') }}">+ {{ t('New Opportunity') }}</a></div>{% endif %}
</div>
{% include "crm/_nav.html" %}
<form class="filters" method="get">
  <input type="search" name="q" value="{{ search }}" placeholder="{{ t('Search…') }}">
  <label class="chip"><input type="checkbox" name="owner" value="me" {{ 'checked' if owner == 'me' }}> {{ t('My opportunities') }}</label>
  <button class="btn">{{ t('Filter') }}</button>
</form>
<div class="kanban">
  {% for key, label, prob in stages %}
  <div class="kcol" data-stage="{{ key }}">
    <div class="khead"><b>{{ t(label) }}</b> <span class="muted">{{ columns[key]|length }}</span>
      <div class="ksum num">{{ totals[key]|money }}</div></div>
    <div class="kbody">
      {% for r in columns[key] %}
      <a class="kcard" href="{{ url_for('crm.lead', lead_id=r.id) }}" draggable="{{ 'true' if can_write else 'false' }}" data-id="{{ r.id }}">
        <div class="ktitle">{% if r.priority %}<span class="stars">{{ '★' * r.priority }}</span> {% endif %}{{ r.title }}</div>
        <div class="muted">{{ r.company_name or r.contact_name or '' }}</div>
        <div class="kfoot">
          <span class="num"><b>{{ r.expected_revenue|money }}</b></span>
          {% if r.next_activity %}<span class="badge {{ 'overdue' if r.next_activity < today else 'pay-partial' }}">{{ r.next_activity }}</span>{% endif %}
        </div>
        <div class="muted" style="font-size:11.5px">{{ r.owner_name or r.owner_user or '' }}</div>
      </a>
      {% endfor %}
    </div>
  </div>
  {% endfor %}
</div>
<p class="muted"><small>{{ t('Drag a card to another column to change its stage.') }}</small></p>
{% endblock %}
{% block scripts %}
<script>
(function () {
  var dragged = null;
  document.querySelectorAll('.kcard[draggable=true]').forEach(function (c) {
    c.addEventListener('dragstart', function () { dragged = c; c.classList.add('dragging'); });
    c.addEventListener('dragend', function () { c.classList.remove('dragging'); });
  });
  document.querySelectorAll('.kcol').forEach(function (col) {
    col.addEventListener('dragover', function (e) { if (dragged) { e.preventDefault(); col.classList.add('over'); } });
    col.addEventListener('dragleave', function () { col.classList.remove('over'); });
    col.addEventListener('drop', function (e) {
      e.preventDefault(); col.classList.remove('over');
      if (!dragged) return;
      var stage = col.dataset.stage, body = new FormData();
      body.append('stage', stage);
      if (stage === 'lost') {
        var reason = prompt({{ t('Why was it lost?')|tojson }});
        if (reason === null) return;
        body.append('reason', reason);
      }
      fetch('{{ url_for("crm.pipeline") }}' + dragged.dataset.id + '/stage', { method: 'POST', body: body, headers: { 'X-Requested-With': 'fetch' } })
        .then(function (r) { if (r.ok) { col.querySelector('.kbody').prepend(dragged); location.reload(); } });
    });
  });
})();
</script>
{% endblock %}