{% extends "base.html" %}

{% block title %}Werkstatt-Pipeline{% endblock %}
{% block heading %}Werkstatt-Pipeline{% endblock %}
{% block topbar_actions %}
  <span class="text-sm text-neutral-500 nums">{{ pipeline.total_jobs }} {% if pipeline.total_jobs == 1 %}Job{% else %}Jobs{% endif %} aktiv</span>
{% endblock %}

{% block content %}

<style>
  .kanban-wrap { overflow-x: auto; padding-bottom: 8px; }
  .kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 240px;
    gap: 12px;
    align-items: start;
  }
  .kanban-col {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 0;
    min-height: 280px;
    box-shadow: var(--card-shadow);
  }
  .kanban-col-h {
    padding: 10px 12px;
    border-bottom: 1px solid var(--card-border-2);
    background: var(--card-bg-2);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .kanban-col-h .step-name {
    font-family: 'Cy', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .kanban-col-h .count {
    background: rgba(255, 255, 255, 0.10);
    color: var(--card-text);
    border-radius: 9999px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 600;
    nums: 1;
  }
  .kanban-col-body { padding: 8px; min-height: 200px; }
  .kanban-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    text-decoration: none;
    color: var(--card-text);
    display: block;
    transition: transform 100ms, box-shadow 100ms, background 100ms;
  }
  .kanban-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(242,88,27,0.20); background: rgba(255,255,255,0.10); border-color: var(--brand-orange); }
  .kanban-card .ident { font-size: 11px; font-weight: 700; color: var(--card-text); }
  .kanban-card .meta  { font-size: 10px; color: var(--card-text-muted); margin-top: 2px; }
  /* Light-Mode-Override */
  body.theme-light .kanban-col-h .count { background: rgba(0,0,0,0.06); color: #1a1a1a; }
  body.theme-light .kanban-card { background: #fff; border-color: var(--card-border-2); color: inherit; }
  body.theme-light .kanban-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.06); background: #fafafa; }
  body.theme-light .kanban-card .ident { color: #1a1a1a; }
  body.theme-light .kanban-card .meta { color: rgb(115,115,115); }
  .step-bar { width: 4px; height: 100%; border-radius: 2px; }
  .priority-rush  { border-left: 3px solid #ef4444; }
  .priority-high  { border-left: 3px solid #f59e0b; }
  .priority-low   { border-left: 3px solid #94a3b8; }
</style>

<div class="kanban-wrap">
  <div class="kanban">
    {% for col in pipeline.columns %}
    <div class="kanban-col" data-step-id="{{ col.step.id }}">
      <div class="kanban-col-h" style="border-top: 3px solid {{ col.step.color }};">
        <div style="display:flex; flex-direction:column; gap:2px; line-height:1.1;">
          <span class="step-name" style="color: {{ col.step.color }};">{{ col.step.name }}</span>
          {% if col.step.hourly_rate is not none %}
            <span style="font-size:9px; color: rgba(255,255,255,0.55); font-weight:600;">{{ '%.2f'|format(col.step.hourly_rate) }} €/h</span>
          {% endif %}
        </div>
        <span class="count">{{ col.jobs|length }}</span>
      </div>
      <div class="kanban-col-body">
        {% for j in col.jobs %}
        <a class="kanban-card {% if j.priority == 'rush' %}priority-rush{% elif j.priority == 'high' %}priority-high{% elif j.priority == 'low' %}priority-low{% endif %}"
           draggable="true" data-job-id="{{ j.id }}"
           href="{% if j.sales_order_id %}/sales-orders/{{ j.sales_order_id }}{% else %}/production#{{ j.id }}{% endif %}">
          <div class="flex items-center justify-between gap-1">
            <span class="ident nums">{{ j.ident }}</span>
            {% if j.priority == 'rush' %}<span class="badge badge-red" style="font-size:8px;padding:1px 4px">EILT</span>
            {% elif j.priority == 'high' %}<span class="badge badge-amber" style="font-size:8px;padding:1px 4px">HOCH</span>{% endif %}
          </div>
          {% if j.order_no %}
            <div class="meta">{{ j.order_no }}{% if j.customer_name %} · {{ j.customer_name }}{% endif %}</div>
          {% elif j.customer_name %}
            <div class="meta">{{ j.customer_name }}</div>
          {% endif %}
          <div class="meta nums">{{ j.qty_done }} / {{ j.qty_target }}{% if j.machine_name %} · {{ j.machine_name }}{% endif %}</div>
          {% if j.first_name %}<div class="meta">{{ j.first_name }} {{ j.last_name }}</div>{% endif %}
        </a>
        {% else %}
        <p class="text-[11px] text-neutral-400 text-center mt-3">—</p>
        {% endfor %}
      </div>
    </div>
    {% endfor %}
  </div>
</div>

{% if pipeline.total_jobs == 0 %}
<div class="card mt-4">
  <div class="p-12 text-center text-sm text-neutral-500">
    Keine aktiven Fertigungsaufträge. Sobald Production-Jobs gestartet werden, erscheinen sie hier in der entsprechenden Stufe.
  </div>
</div>
{% endif %}

<style>
  .kanban-col.is-drop-target {
    background: rgba(232, 93, 47, 0.08);
    box-shadow: inset 0 0 0 2px #E85D2F;
  }
  .kanban-card.is-dragging { opacity: 0.4; cursor: grabbing; }
</style>
<script>
(function () {
  const cards = document.querySelectorAll('.kanban-card[data-job-id]');
  const cols  = document.querySelectorAll('.kanban-col[data-step-id]');
  if (!cards.length || !cols.length) return;
  let dragJobId = null;

  cards.forEach(c => {
    c.addEventListener('dragstart', e => {
      dragJobId = c.dataset.jobId;
      c.classList.add('is-dragging');
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text/plain', dragJobId);
    });
    c.addEventListener('dragend', () => {
      c.classList.remove('is-dragging');
      cols.forEach(col => col.classList.remove('is-drop-target'));
      dragJobId = null;
    });
  });

  cols.forEach(col => {
    col.addEventListener('dragover', e => {
      if (dragJobId) { e.preventDefault(); col.classList.add('is-drop-target'); }
    });
    col.addEventListener('dragleave', () => col.classList.remove('is-drop-target'));
    col.addEventListener('drop', e => {
      e.preventDefault();
      col.classList.remove('is-drop-target');
      if (!dragJobId) return;
      const stepId = col.dataset.stepId;
      // Same column? skip
      const card = document.querySelector('.kanban-card[data-job-id="' + dragJobId + '"]');
      if (card && card.closest('.kanban-col') === col) return;
      function getCookie(n) { return document.cookie.split('; ').find(r => r.startsWith(n + '='))?.split('=')[1] || ''; }
      const csrf = getCookie('csrf_token');
      fetch('/api/pipeline/move', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
        body: JSON.stringify({ job_id: parseInt(dragJobId, 10), step_id: parseInt(stepId, 10), csrf_token: csrf }),
      }).then(r => r.json()).then(d => {
        if (d.ok) {
          if (window.toast) toast('Job verschoben', 'success', { ttl: 1500 });
          setTimeout(() => location.reload(), 400);
        } else if (window.toast) toast(d.error || 'Verschieben fehlgeschlagen', 'error');
      }).catch(() => { if (window.toast) toast('Netzwerkfehler', 'error'); });
    });
  });
})();
</script>

{% endblock %}