{% extends "base.html" %}
{% block content %}
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --p-primary: #2F5496;
  --p-primary-light: #4a7bc4;
  --p-primary-dark: #1a3055;
  --p-primary-glow: rgba(47,84,150,.25);
  --p-accent: #f0c040;
  --p-success: #27ae60;
  --p-success-light: #e8f8f0;
  --p-warning: #f39c12;
  --p-danger: #e74c3c;
  --p-bg: #f0f2f8;
  --p-card-bg: rgba(255,255,255,.85);
  --p-border: rgba(0,0,0,.06);
  --p-text: #1a1a2e;
  --p-text-light: #6b7280;
  --p-radius: 14px;
  --p-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
  --p-shadow-hover: 0 4px 12px rgba(47,84,150,.12), 0 8px 32px rgba(0,0,0,.06);
  --p-transition: all .35s cubic-bezier(.25,.46,.45,.94);
}

body { background: var(--p-bg); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
.projekt-page { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* === Hero Header === */
.projekt-hero {
  display: flex; align-items: center; justify-content: space-between;
  padding: 32px 0 24px; flex-wrap: wrap; gap: 16px;
}
.projekt-hero-left h1 {
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--p-primary-dark), var(--p-primary-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin: 0 0 4px;
  display: flex; align-items: center; gap: 10px;
}
.projekt-hero-left h1 .icon { -webkit-text-fill-color: initial; font-size: 1.6rem; }
.projekt-hero-left .hero-sub {
  font-size: .88rem; color: var(--p-text-light);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.projekt-hero-left .hero-sub .stat {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(47,84,150,.08); padding: 3px 10px; border-radius: 20px;
  font-size: .78rem; font-weight: 500; color: var(--p-primary);
}
.btn-neu-projekt {
  background: linear-gradient(135deg, var(--p-primary), var(--p-primary-light));
  color: #fff; border: none; border-radius: 12px; padding: 12px 28px;
  font-size: .92rem; font-weight: 600; cursor: pointer;
  transition: var(--p-transition); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 14px var(--p-primary-glow);
  white-space: nowrap;
}
.btn-neu-projekt:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px var(--p-primary-glow);
  color: #fff;
}
.btn-neu-projekt:active { transform: scale(.97); }

/* === Search Bar === */
.search-wrap {
  display: flex; gap: 8px; margin-bottom: 28px; position: relative;
}
.search-wrap .control { flex: 1; position: relative; }
.search-wrap .control input {
  width: 100%; padding: 14px 18px 14px 46px;
  background: var(--p-card-bg); backdrop-filter: blur(8px);
  border: 2px solid var(--p-border); border-radius: 14px;
  font-size: .92rem; font-family: inherit;
  transition: var(--p-transition); color: var(--p-text);
  box-shadow: var(--p-shadow);
}
.search-wrap .control input::placeholder { color: #b0b8c8; }
.search-wrap .control input:focus {
  outline: none; border-color: var(--p-primary);
  box-shadow: 0 0 0 4px var(--p-primary-glow), var(--p-shadow);
  background: #fff;
}
.search-wrap .control .search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 1.1rem; opacity: .35; pointer-events: none;
  transition: opacity .3s;
}
.search-wrap .control input:focus ~ .search-icon { opacity: .6; }
.search-wrap .clear-btn {
  padding: 0 18px; border: 2px solid var(--p-border);
  border-radius: 14px; background: var(--p-card-bg); backdrop-filter: blur(8px);
  cursor: pointer; transition: var(--p-transition); font-size: .9rem;
  color: var(--p-text-light); box-shadow: var(--p-shadow);
  font-family: inherit; font-weight: 500;
}
.search-wrap .clear-btn:hover {
  background: #fff; border-color: var(--p-danger); color: var(--p-danger);
  transform: scale(1.04);
}
.search-wrap .result-count {
  position: absolute; right: 60px; top: 50%; transform: translateY(-50%);
  font-size: .75rem; color: var(--p-text-light); background: rgba(0,0,0,.04);
  padding: 2px 10px; border-radius: 10px; pointer-events: none;
  opacity: 0; transition: opacity .3s;
}
.search-wrap .result-count.visible { opacity: 1; }

/* === Card Container === */
.projekt-container {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 40px;
}

/* === Project Card === */
.projekt-card {
  background: var(--p-card-bg); backdrop-filter: blur(12px);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  box-shadow: var(--p-shadow);
  transition: var(--p-transition);
  overflow: hidden;
  animation: cardIn .45s cubic-bezier(.25,.46,.45,.94) both;
}
.projekt-card:hover {
  box-shadow: var(--p-shadow-hover);
  border-color: rgba(47,84,150,.12);
}
.projekt-card.js-project-hide { display: none; }
.projekt-card.dragging { opacity: .5; transform: scale(.98); }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.projekt-card:nth-child(1) { animation-delay: 0s; }
.projekt-card:nth-child(2) { animation-delay: .04s; }
.projekt-card:nth-child(3) { animation-delay: .08s; }
.projekt-card:nth-child(4) { animation-delay: .12s; }
.projekt-card:nth-child(5) { animation-delay: .16s; }
.projekt-card:nth-child(6) { animation-delay: .2s; }
.projekt-card:nth-child(7) { animation-delay: .24s; }
.projekt-card:nth-child(8) { animation-delay: .28s; }

/* === Card Header (Summary) === */
.card-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; cursor: pointer; user-select: none;
  transition: background .2s;
  position: relative;
}
.card-header:hover { background: rgba(47,84,150,.03); }
.card-header:active { background: rgba(47,84,150,.06); }
.card-header .arrow {
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  font-size: .5rem; color: #bbb; flex-shrink: 0;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  border-radius: 6px; background: rgba(0,0,0,.03);
}
.card-header.is-open .arrow { transform: rotate(90deg); background: rgba(47,84,150,.08); color: var(--p-primary); }
.card-header .proj-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
  background: linear-gradient(135deg, #eef2fa, #e0e7f5);
  transition: var(--p-transition);
}
.card-header:hover .proj-icon { transform: scale(1.05) rotate(-2deg); }
.card-header .proj-info { flex: 1; min-width: 0; }
.card-header .proj-info .proj-name {
  font-weight: 600; font-size: .95rem; color: var(--p-text);
  letter-spacing: -.01em; display: flex; align-items: center; gap: 6px;
}
.card-header .proj-info .proj-name .edit-trigger {
  display: inline-flex; font-size: .7rem; opacity: 0;
  cursor: pointer; transition: opacity .2s; color: #bbb; padding: 2px;
  border-radius: 4px;
}
.card-header:hover .proj-info .proj-name .edit-trigger { opacity: 1; }
.card-header .proj-info .proj-name .edit-trigger:hover { color: var(--p-primary); background: rgba(47,84,150,.08); }
.card-header .proj-info .proj-meta {
  display: flex; align-items: center; gap: 8px; margin-top: 3px;
  font-size: .75rem; color: var(--p-text-light); flex-wrap: wrap;
}
.card-header .proj-info .proj-meta .badge {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 10px;
  border-radius: 20px; font-weight: 500; font-size: .7rem;
}
.card-header .proj-info .proj-meta .badge-anz { background: #f0f2f8; color: #555; }
.card-header .proj-info .proj-meta .badge-pos { background: rgba(47,84,150,.08); color: var(--p-primary); }
.card-header .proj-info .proj-meta .badge-lv { background: rgba(243,156,18,.08); color: #b87310; }
.card-header .proj-info .proj-meta .badge-summe { background: rgba(39,174,96,.08); color: #1a8a4a; }
.card-header .proj-info .proj-meta .status-pill {
  padding: 2px 12px; border-radius: 20px; font-weight: 500; font-size: .68rem;
  transition: var(--p-transition);
}
.card-header .proj-info .proj-meta .status-pill.aktiv {
  background: linear-gradient(135deg, #e8f8f0, #d0f0e0);
  color: #1a8a4a; box-shadow: 0 0 0 1px rgba(39,174,96,.15);
}
.card-header .proj-info .proj-meta .status-pill.archiv {
  background: #f5f5f5; color: #aaa;
}
.card-header .proj-tools {
  display: flex; gap: 4px; flex-shrink: 0; align-items: center;
}
.card-header .proj-tools .icon-btn {
  width: 32px; height: 32px; border: none; background: transparent;
  border-radius: 8px; cursor: pointer; font-size: .85rem;
  transition: var(--p-transition); display: flex; align-items: center; justify-content: center;
  color: #bbb;
}
.card-header .proj-tools .icon-btn:hover { background: rgba(47,84,150,.08); color: var(--p-primary); transform: scale(1.1); }

/* === Inline Name Edit === */
.name-edit-form { display: inline-flex; align-items: center; gap: 4px; }
.name-edit-form input {
  font-size: .85rem; padding: 4px 10px; border-radius: 8px;
  border: 2px solid var(--p-primary); background: #fff;
  font-family: inherit; font-weight: 600; width: 200px;
  box-shadow: 0 0 0 3px var(--p-primary-glow);
}
.name-edit-form input:focus { outline: none; }
.name-edit-form .mini-btn {
  width: 26px; height: 26px; border-radius: 6px; border: none;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: .65rem; transition: var(--p-transition);
}
.name-edit-form .mini-btn.save { background: var(--p-success); color: #fff; }
.name-edit-form .mini-btn.save:hover { transform: scale(1.15); }
.name-edit-form .mini-btn.cancel { background: #f0f2f8; color: #888; }
.name-edit-form .mini-btn.cancel:hover { background: #fee8e8; color: var(--p-danger); }

/* === Card Body === */
.card-body {
  padding: 0 20px 16px 76px;
  max-height: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.25,.46,.45,.94), opacity .35s ease, padding .35s ease;
  opacity: 0;
}
.card-body.is-open {
  max-height: 600px; opacity: 1; padding-bottom: 16px;
}

/* === Aufmass Rows === */
.aufmass-rows { display: flex; flex-direction: column; gap: 3px; }
.aufmass-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: 10px; text-decoration: none; color: var(--p-text);
  transition: var(--p-transition); cursor: pointer; position: relative;
  margin: 0 -8px;
}
.aufmass-row:hover {
  background: linear-gradient(135deg, rgba(47,84,150,.04), rgba(47,84,150,.02));
  transform: translateX(4px);
}
.aufmass-row:active { transform: translateX(2px) scale(.99); }
.aufmass-row .row-icon {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--p-primary); opacity: .3; flex-shrink: 0;
  transition: var(--p-transition);
}
.aufmass-row:hover .row-icon { opacity: .7; transform: scale(1.3); }
.aufmass-row .a-name {
  font-weight: 500; font-size: .85rem; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aufmass-row .a-meta {
  font-size: .72rem; color: var(--p-text-light);
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.aufmass-row .a-meta .typ-tag {
  background: rgba(240,192,64,.12); color: #b8941a;
  padding: 1px 8px; border-radius: 10px; font-size: .65rem; font-weight: 500;
}
.aufmass-row .a-actions {
  display: flex; gap: 2px; opacity: 0;
  transition: opacity .25s, transform .25s;
  transform: translateX(-6px);
}
.aufmass-row:hover .a-actions { opacity: 1; transform: translateX(0); }
.aufmass-row .a-actions .act-btn {
  width: 28px; height: 28px; border: none; background: transparent;
  border-radius: 6px; cursor: pointer; font-size: .78rem;
  transition: var(--p-transition); display: flex; align-items: center; justify-content: center;
  color: #bbb;
}
.aufmass-row .a-actions .act-btn:hover { background: rgba(47,84,150,.08); color: var(--p-primary); transform: scale(1.15); }
.aufmass-row .a-actions .act-btn.danger:hover { background: #fde8e8; color: var(--p-danger); }

/* === Toolbar === */
.card-toolbar {
  display: flex; gap: 6px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--p-border);
}
.card-toolbar .tb-btn {
  font-size: .75rem; padding: 6px 14px; border-radius: 8px;
  border: 1.5px solid var(--p-border); background: transparent;
  cursor: pointer; transition: var(--p-transition);
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-weight: 500; color: var(--p-text-light);
}
.card-toolbar .tb-btn:hover {
  background: rgba(47,84,150,.06); border-color: rgba(47,84,150,.2);
  color: var(--p-primary); transform: translateY(-1px);
}
.card-toolbar .tb-btn:active { transform: scale(.96); }
.card-toolbar .tb-btn.primary {
  background: linear-gradient(135deg, var(--p-primary), var(--p-primary-light));
  color: #fff; border-color: transparent;
  box-shadow: 0 2px 8px var(--p-primary-glow);
}
.card-toolbar .tb-btn.primary:hover { box-shadow: 0 4px 16px var(--p-primary-glow); }

/* === Aufmass Neu Form === */
.aufmass-neu-form {
  display: none; margin-top: 16px;
  animation: formSlide .35s cubic-bezier(.25,.46,.45,.94);
}
@keyframes formSlide {
  from { opacity: 0; transform: translateY(-12px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.aufmass-form-wrap {
  background: linear-gradient(135deg, #f8f9fd, #f0f2f8);
  border-radius: 12px; padding: 20px;
  border: 1px solid rgba(47,84,150,.08);
}
.aufmass-form-wrap .aufmass-card {
  background: #fff; border-radius: 10px; padding: 16px;
  margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.04);
  border: 1px solid var(--p-border);
}
.aufmass-form-wrap .aufmass-card h3 {
  font-size: .82rem; font-weight: 600; margin-bottom: 10px;
  color: var(--p-primary-dark); display: flex; align-items: center; gap: 6px;
}
.aufmass-form-wrap .aufmass-grid-4 {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px;
}
.aufmass-form-wrap .aufmass-field label {
  display: block; font-size: .7rem; font-weight: 500;
  color: var(--p-text-light); margin-bottom: 3px;
}
.aufmass-form-wrap .aufmass-field .input,
.aufmass-form-wrap .aufmass-field .select select {
  width: 100%; border-radius: 8px; border: 1.5px solid var(--p-border);
  padding: 6px 10px; font-size: .8rem; font-family: inherit;
  transition: var(--p-transition); background: #fff;
}
.aufmass-form-wrap .aufmass-field .input:focus,
.aufmass-form-wrap .aufmass-field .select select:focus {
  outline: none; border-color: var(--p-primary);
  box-shadow: 0 0 0 3px var(--p-primary-glow);
}
.aufmass-form-wrap .aufmass-field-full { grid-column: 1 / -1; }
.aufmass-form-wrap .form-footer {
  display: flex; justify-content: space-between; align-items: center; margin-top: 12px;
}

/* === Toast / Confetti === */
.toast-container { position: fixed; bottom: 30px; right: 30px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast {
  padding: 14px 22px; border-radius: 12px; color: #fff; font-size: .85rem; font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,.15); animation: toastIn .4s cubic-bezier(.34,1.56,.64,1);
  display: flex; align-items: center; gap: 8px; backdrop-filter: blur(12px);
  cursor: pointer; transition: opacity .3s, transform .3s;
  font-family: 'Inter', sans-serif;
}
.toast:hover { transform: scale(1.03); }
.toast.toast-success { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.toast.toast-error { background: linear-gradient(135deg, #e74c3c, #f06050); }
.toast.toast-info { background: linear-gradient(135deg, var(--p-primary), var(--p-primary-light)); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px) scale(.9); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Confetti canvas */
#confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10000; }

/* === Empty State === */
.empty-state {
  text-align: center; padding: 80px 20px;
  background: var(--p-card-bg); backdrop-filter: blur(12px);
  border: 1px solid var(--p-border); border-radius: var(--p-radius);
  box-shadow: var(--p-shadow);
}
.empty-state .empty-icon {
  font-size: 4rem; margin-bottom: 16px; display: block;
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.empty-state h2 { font-size: 1.3rem; font-weight: 600; color: var(--p-text); margin-bottom: 8px; }
.empty-state p { color: var(--p-text-light); font-size: .92rem; max-width: 360px; margin: 0 auto 24px; }

/* === Responsive === */
@media(max-width:768px) {
  .projekt-hero { padding: 20px 0 16px; }
  .projekt-hero-left h1 { font-size: 1.3rem; }
  .card-header { padding: 12px 14px; flex-wrap: wrap; }
  .card-header .proj-icon { width: 32px; height: 32px; font-size: 1rem; }
  .card-body { padding: 0 14px 12px 60px; }
  .card-body.is-open { padding-bottom: 12px; }
  .card-header .proj-tools { display: flex; }
  .aufmass-row { padding: 6px 8px; flex-wrap: wrap; }
  .aufmass-row .a-actions { opacity: 1; }
  .aufmass-form-wrap { padding: 14px; }
  .aufmass-form-wrap .aufmass-grid-4 { grid-template-columns: 1fr 1fr; }
}

/* === Scrollbar === */
.projekt-container::-webkit-scrollbar { width: 6px; }
.projekt-container::-webkit-scrollbar-track { background: transparent; }
.projekt-container::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* === Ripple effect === */
.ripple { position: relative; overflow: hidden; }
.ripple::after {
  content: ''; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.4); width: 100px; height: 100px;
  margin-top: -50px; margin-left: -50px;
  top: 50%; left: 50%; transform: scale(0);
  opacity: 0; pointer-events: none;
}
.ripple:active::after {
  animation: rippleAnim .6s ease-out;
}
@keyframes rippleAnim {
  from { transform: scale(0); opacity: .5; }
  to { transform: scale(4); opacity: 0; }
}
</style>

<div class="projekt-page">
  <!-- Hero -->
  <div class="projekt-hero">
    <div class="projekt-hero-left">
      <h1><span class="icon">📂</span> Projekte & Aufmaße</h1>
      <div class="hero-sub">
        <span>{{ projekte|length }} Projekte</span>
        {% set ns = namespace(aufmass_total=0) %}{% for item in projekte %}{% set ns.aufmass_total = ns.aufmass_total + item.aufmass_liste|length %}{% endfor %}
        <span>{{ ns.aufmass_total }} Aufmaße</span>
        {% if preise_sichtbar and gesamt_summe > 0 %}
        <span class="stat">{{ gesamt_summe|german_number }} €</span>
        <span class="stat">{{ gesamt_positionen }} Positionen</span>
        {% endif %}
      </div>
    </div>
    <a class="btn-neu-projekt" href="{{ url_for('aufmass.neu') }}">
      <span>+</span> Neues Projekt
    </a>
  </div>

  <!-- Search -->
  <div class="search-wrap">
    <div class="control">
      <span class="search-icon">🔍</span>
      <input id="projekt-suche" placeholder="Projektname, Aufmaß, SM-Nr. …">
      <span class="result-count" id="result-count"></span>
    </div>
    <button class="clear-btn" id="search-clear">✕</button>
  </div>

  <!-- List -->
  <div class="projekt-container" id="projekt-tree">
    {% if projekte %}
    {% for item in projekte %}
    {% set p = item.project %}
    <div class="projekt-card" data-project-id="{{ p.id }}" data-project-name="{{ p.bezeichnung or p.sm_nr or '' }}">
      <div class="card-header js-card-toggle" role="button" tabindex="0">
        <span class="arrow">▶</span>
        <span class="proj-icon">📁</span>
        <div class="proj-info">
          <div class="proj-name js-name-ctnr">
            <span class="js-projekt-name">{{ p.bezeichnung or p.sm_nr }}</span>
            <span class="edit-trigger js-name-edit-trigger" title="Umbenennen">✎</span>
            <span class="name-edit-form js-name-edit-form" style="display:none">
              <input type="text" value="{{ p.bezeichnung or p.sm_nr or '' }}">
              <button class="mini-btn save js-name-save">✓</button>
              <button class="mini-btn cancel js-name-cancel">✕</button>
            </span>
          </div>
          <div class="proj-meta">
            <span class="badge badge-anz">{{ item.aufmass_liste|length }} Aufmaße</span>
            <span class="badge badge-pos">{{ item.positionen }} Pos.</span>
            {% if preise_sichtbar and item.summe > 0 %}
            <span class="badge badge-summe">{{ item.summe|german_number }} €</span>
            {% endif %}
            {% if p.lv_name %}
            <span class="badge badge-lv" title="LV">{{ p.lv_name }}</span>
            {% endif %}
            <span class="status-pill {{ 'aktiv' if p.status == 'aktiv' else 'archiv' }}">{{ p.status }}</span>
          </div>
        </div>
        {% if current_user.is_firmadmin() or current_user.darf_aufmass_verwalten %}
        <div class="proj-tools">
          <button class="icon-btn js-card-settings" title="Einstellungen">⚙</button>
        </div>
        {% endif %}
      </div>

      <div class="card-body js-card-body">
        <div class="aufmass-rows">
          {% for a_item in item.aufmass_liste %}
          {% set a = a_item.aufmass %}
          <a class="aufmass-row" href="{{ url_for('aufmass.bearbeiten', project_id=p.id, aufmass_id=a.id) }}" data-aufmass-id="{{ a.id }}" data-project-id="{{ p.id }}" data-aufmass-name="{{ a.name }}">
            <span class="row-icon"></span>
            <span class="a-name">{{ a.name }}</span>
            <span class="a-meta">
              {% if a.typ %}<span class="typ-tag">{{ a.typ }}</span>{% endif %}
              {{ a_item.positionen }} Pos.
              {% if preise_sichtbar and a_item.summe > 0 %}
              · {{ a_item.summe|german_number }} €
              {% endif %}
            </span>
            {% if current_user.is_firmadmin() or current_user.darf_aufmass_verwalten %}
            <span class="a-actions">
              <button class="act-btn js-aufmass-rename" title="Umbenennen">✎</button>
              <form method="POST" action="{{ url_for('aufmass.aufmass_duplizieren', project_id=p.id, aufmass_id=a.id) }}" style="display:inline" onclick="event.stopPropagation()">
                <button class="act-btn" title="Duplizieren">📋</button>
              </form>
              <form method="POST" action="{{ url_for('aufmass.aufmass_loeschen', project_id=p.id, aufmass_id=a.id) }}" style="display:inline" onsubmit="return confirm('Aufmaß wirklich löschen?')" onclick="event.stopPropagation()">
                <button class="act-btn danger" title="Löschen">✕</button>
              </form>
            </span>
            {% endif %}
          </a>
          {% endfor %}
        </div>

        {% if current_user.is_firmadmin() or current_user.darf_aufmass_verwalten %}
        <div class="card-toolbar">
          <button class="tb-btn primary js-aufmass-neu-btn" data-project-id="{{ p.id }}">
            <span>+</span> Neues Aufmaß
          </button>
          <button class="tb-btn" onclick="document.getElementById('import-file-{{ p.id }}').click()">
            📥 Import
          </button>
          <form method="POST" action="{{ url_for('aufmass.aufmass_import', project_id=p.id) }}" enctype="multipart/form-data" style="display:none">
            <input type="file" name="file" accept=".txt" id="import-file-{{ p.id }}" onchange="this.form.submit()">
          </form>
        </div>

        <div class="aufmass-neu-form js-aufmass-neu-form">
          <div class="aufmass-form-wrap">
            <form method="POST" action="{{ url_for('aufmass.aufmass_neu_voll', project_id=p.id) }}" class="aufmass-form">
              <input type="hidden" name="ev_details_id" value="{{ p.ev_details_id or '' }}">
              <input type="hidden" name="name" id="aufmass-name-{{ p.id }}">
              <div class="aufmass-card"><h3>Basisdaten</h3>
                <div class="aufmass-grid-4">
                  <div class="aufmass-field"><label>Vertrag</label><div class="select is-small" style="width:100%"><select name="contract_id"><option value="">– Kein Vertrag –</option>{% for c in contracts %}<option value="{{ c.id }}" {{ 'selected' if p.contract_id == c.id }}>{{ c.name }}</option>{% endfor %}</select></div></div>
                  <div class="aufmass-field"><label>LV-Name</label><input class="input" name="lv_name" value="{{ p.lv_name or '' }}"></div>
                  <div class="aufmass-field"><label>Typ</label><div class="select is-small" style="width:100%"><select name="typ"><option value="">– Typ wählen –</option>{% for t in typen %}<option value="{{ t.name }}">{{ t.name }}</option>{% endfor %}</select></div></div>
                  <div class="aufmass-field"><label>Aufmaß-Datum</label><input class="input" name="datum" type="date" value="{{ p.datum or '' }}"></div>
                </div>
                <div class="aufmass-field aufmass-field-full" style="margin-top:8px"><label>Bezeichnung / Baustelle</label><input class="input js-aufmass-auto-name js-validate-name" name="bezeichnung" value=""><span class="js-name-warn is-size-7 has-text-danger" style="display:none">Ungültige Zeichen</span></div>
                <div class="aufmass-field aufmass-field-full"><label>Bauabschnitt</label><input class="input js-aufmass-auto-name js-validate-name" name="bauabschnitt" value="{{ p.bauabschnitt or '' }}"></div>
              </div>
              <div class="aufmass-card"><h3>🕐 Zeitraum & Referenz</h3>
                <div class="aufmass-grid-4">
                  <div class="aufmass-field"><label>SM-Nr.</label><input class="input js-aufmass-auto-name" name="sm_nr" value="{{ p.sm_nr or '' }}"></div>
                  <div class="aufmass-field"><label>Abruf-Nr.</label><input class="input js-aufmass-auto-name" name="abruf_nr" value="{{ p.abruf_nr or '' }}"></div>
                  <div class="aufmass-field"><label>Startdatum</label><input class="input" name="datum_start" type="date" value="{{ p.datum_start or '' }}"></div>
                  <div class="aufmass-field"><label>Enddatum</label><input class="input" name="datum_ende" type="date" value="{{ p.datum_ende or '' }}"></div>
                </div>
              </div>
              <div class="aufmass-card"><h3>👤 Ansprechpartner</h3>
                <div class="aufmass-grid-4">
                  <div class="aufmass-field"><label>Vorname</label><input class="input" name="ansprechpartner_vorname" value="{{ p.ansprechpartner_vorname or '' }}"></div>
                  <div class="aufmass-field"><label>Nachname</label><input class="input" name="ansprechpartner_nachname" value="{{ p.ansprechpartner_nachname or '' }}"></div>
                  <div class="aufmass-field"><label>Telefon</label><input class="input" name="ansprechpartner_tel" value="{{ p.ansprechpartner_tel or '' }}"></div>
                  <div class="aufmass-field"><label>Email</label><input class="input" name="ansprechpartner_email" value="{{ p.ansprechpartner_email or '' }}"></div>
                </div>
              </div>
              <div class="form-footer">
                <button class="tb-btn" type="button" onclick="this.closest('.aufmass-neu-form').style.display='none'">Abbrechen</button>
                <div style="display:flex;gap:8px">
                  <button class="tb-btn js-aufmass-neu-reset" type="button">🗑️ Zurücksetzen</button>
                  <button class="tb-btn primary" type="submit">Aufmaß anlegen</button>
                </div>
              </div>
            </form>
          </div>
        </div>
        {% endif %}
      </div>
    </div>
    {% endfor %}
    {% else %}
    <div class="empty-state">
      <span class="empty-icon">📂</span>
      <h2>Noch keine Projekte</h2>
      <p>Erstelle dein erstes Projekt und beginne mit der Aufmaß-Erfassung.</p>
      <a class="btn-neu-projekt" href="{{ url_for('aufmass.neu') }}">+ Projekt anlegen</a>
    </div>
    {% endif %}
  </div>
</div>

<!-- Toast Container -->
<div class="toast-container" id="toast-container"></div>

<!-- Confetti Canvas -->
<canvas id="confetti-canvas"></canvas>

<script>
/* === Confetti System === */
(function(){
  var c=document.getElementById('confetti-canvas'),ctx=c.getContext('2d');
  var W,H,particles=[],frame;
  function resize(){W=c.width=window.innerWidth;H=c.height=window.innerHeight;}
  window.addEventListener('resize',resize);resize();
  var colors=['#2F5496','#f0c040','#27ae60','#e74c3c','#8e44ad','#3498db','#e67e22','#1abc9c'];
  function launch(count){
    for(var i=0;i<count;i++){
      particles.push({
        x:W/2+(Math.random()-.5)*W*.6,y:-30,
        r:Math.random()*6+3,color:colors[Math.floor(Math.random()*colors.length)],
        vx:(Math.random()-.5)*3,vy:Math.random()*6+4,
        rot:Math.random()*360,rotV:(Math.random()-.5)*8,
        gravity:.12,friction:.98,alpha:1,shape:Math.floor(Math.random()*3),
        life:0,maxLife:120+Math.random()*80
      });
    }
    if(!frame)requestAnimationFrame(animate);
  }
  function animate(){
    ctx.clearRect(0,0,W,H);var keep=false;
    for(var i=particles.length-1;i>=0;i--){
      var p=particles[i];p.vy+=p.gravity;p.x+=p.vx;p.y+=p.vy;
      p.vx*=p.friction;p.vy*=p.friction;p.rot+=p.rotV;p.life++;
      if(p.life>p.maxLife)p.alpha-=.02;
      if(p.y>H+30||p.x<-30||p.x>W+30||p.alpha<=0){particles.splice(i,1);continue;}
      keep=true;
      ctx.save();ctx.translate(p.x,p.y);ctx.rotate(p.rot*Math.PI/180);ctx.globalAlpha=Math.max(0,p.alpha);
      ctx.fillStyle=p.color;
      if(p.shape===0){ctx.fillRect(-p.r,-p.r/2,p.r*2,p.r);}
      else if(p.shape===1){ctx.beginPath();ctx.arc(0,0,p.r,0,Math.PI*2);ctx.fill();}
      else{ctx.beginPath();ctx.moveTo(0,-p.r);ctx.lineTo(p.r,p.r);ctx.lineTo(-p.r,p.r);ctx.closePath();ctx.fill();}
      ctx.restore();
    }
    if(keep){frame=requestAnimationFrame(animate);}
    else{frame=null;}
  }
  window.launchConfetti=function(count){launch(count||80);};
})();

/* === Toast System === */
function showToast(msg,type){
  type=type||'success';
  var c=document.getElementById('toast-container');
  var t=document.createElement('div');t.className='toast toast-'+type;
  var icons={success:'✓',error:'✕',info:'ℹ'};
  t.innerHTML=(icons[type]||'')+' '+msg;
  c.appendChild(t);
  setTimeout(function(){t.style.opacity='0';t.style.transform='translateX(40px) scale(.9)';setTimeout(function(){if(t.parentNode)t.remove();},400);},3000);
  t.addEventListener('click',function(){t.style.opacity='0';t.style.transform='translateX(40px) scale(.9)';setTimeout(function(){if(t.parentNode)t.remove();},400);});
}

/* === Settings Gear → Project Detail === */
document.querySelectorAll('.js-card-settings').forEach(function(btn){
  btn.addEventListener('click',function(e){
    e.stopPropagation();e.preventDefault();
    var card=this.closest('.projekt-card');
    if(card)window.location.href='/projekt/'+card.dataset.projectId;
  });
});

/* === Card Toggle === */
document.querySelectorAll('.js-card-toggle').forEach(function(header){
  header.addEventListener('click',function(e){
    if(e.target.closest('.name-edit-form')||e.target.closest('.js-name-edit-trigger'))return;
    var card=header.closest('.projekt-card');
    var body=card.querySelector('.js-card-body');
    var isOpen=body.classList.contains('is-open');
    body.classList.toggle('is-open');header.classList.toggle('is-open');
    var pid=card.dataset.projectId;
    localStorage.setItem('tree_open_'+pid,isOpen?'0':'1');
  });
});

/* Restore open state */
document.querySelectorAll('.projekt-card').forEach(function(card){
  var pid=card.dataset.projectId;
  if(localStorage.getItem('tree_open_'+pid)==='1'){
    card.querySelector('.js-card-body').classList.add('is-open');
    card.querySelector('.js-card-toggle').classList.add('is-open');
  }
});

/* === Filter === */
function filterProjects(){
  var q=document.getElementById('projekt-suche').value.toLowerCase();
  var count=0,visible=0;
  document.querySelectorAll('.projekt-card').forEach(function(c){
    var n=(c.dataset.projectName||'').toLowerCase();
    var aufmassNames=Array.from(c.querySelectorAll('.aufmass-row')).map(function(r){return(r.dataset.aufmassName||'').toLowerCase();}).join(' ');
    var match=!q||n.indexOf(q)!==-1||aufmassNames.indexOf(q)!==-1;
    c.classList.toggle('js-project-hide',!!q&&!match);
    visible+=match?1:0;count++;
  });
  var rc=document.getElementById('result-count');
  if(q){rc.textContent=visible+'/'+count;rc.classList.add('visible');}
  else{rc.classList.remove('visible');}
}
document.getElementById('projekt-suche').addEventListener('input',filterProjects);
document.getElementById('search-clear').addEventListener('click',function(){
  document.getElementById('projekt-suche').value='';filterProjects();
  document.getElementById('projekt-suche').focus();
});

/* === Auto Aufmass Name === */
function updateAufmassName(pid){
  var nameInput=document.getElementById('aufmass-name-'+pid);
  if(!nameInput)return;
  var f=nameInput.closest('form');
  var parts=[f.querySelector('[name="bezeichnung"]').value.trim(),f.querySelector('[name="bauabschnitt"]').value.trim(),f.querySelector('[name="sm_nr"]').value.trim(),f.querySelector('[name="abruf_nr"]').value.trim()].filter(Boolean);
  nameInput.value=parts.join(' - ').replace(/[<>:"\/\\|?*&#%{}~\[\]]/g,'').replace(/\s+/g,' ').trim();
}
document.querySelectorAll('.js-aufmass-auto-name').forEach(function(inp){
  inp.addEventListener('input',function(){var f=inp.closest('form');var ni=f.querySelector('[name="name"]');if(ni)updateAufmassName(ni.id.replace('aufmass-name-',''));});
});

/* === Aufmass-Neu Toggle + Reset === */
document.querySelectorAll('.js-aufmass-neu-btn').forEach(function(btn){
  btn.addEventListener('click',function(e){
    e.preventDefault();
    var f=this.closest('.card-body').querySelector('.aufmass-neu-form');
    if(f.style.display==='none'||!f.style.display){f.style.display='block';}
    else{f.style.display='none';}
  });
});

document.querySelectorAll('.aufmass-neu-form [type="button"]').forEach(function(b){
  var txt=b.textContent.trim();
  if(txt.includes('Abbrechen')){
    b.addEventListener('click',function(e){
      e.preventDefault();this.closest('.aufmass-neu-form').style.display='none';
    });
  }
});

document.querySelectorAll('.js-aufmass-neu-reset').forEach(function(b){
  b.addEventListener('click',function(e){
    e.preventDefault();
    var rf=this.closest('form');
    if(rf){rf.querySelectorAll('input[name]:not([type=hidden])').forEach(function(i){i.value=''});var pid=rf.closest('.projekt-card').dataset.projectId;updateAufmassName(pid);}
  });
});

/* === Aufmass Inline Rename === */
document.querySelectorAll('.js-aufmass-rename').forEach(function(btn){
  btn.addEventListener('click',function(e){
    e.stopPropagation();e.preventDefault();
    var row=this.closest('.aufmass-row');
    var ns=row.querySelector('.a-name'),link=row.querySelector('a');
    if(!ns||!link)return;
    var aid=row.dataset.aufmassId,pid=row.dataset.projectId,old=ns.textContent.trim();
    link.style.display='none';
    var startInput=document.createElement('input');
    startInput.className='input is-small';startInput.value=old;
    startInput.style.cssText='flex:1;min-width:60px;font-size:.82rem;padding:4px 10px;border-radius:8px;border:2px solid #2F5496;background:#fff;font-family:inherit;';
    row.insertBefore(startInput,this.closest('.a-actions'));
    function done(){if(startInput.parentNode)startInput.remove();link.style.display=''}
    function save(){
      var v=startInput.value.trim();if(!v){done();return}
      ns.textContent=v;done();
      fetch('/projekt/'+pid+'/aufmass/'+aid+'/umbenennen',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:v})})
        .then(function(r){if(!r.ok)throw new Error('Fehler');showToast('Aufmaß umbenannt','success');launchConfetti(30);})
        .catch(function(){ns.textContent=old;showToast('Fehler beim Umbenennen','error');});
    }
    startInput.addEventListener('blur',save);
    startInput.addEventListener('keydown',function(ev){
      if(ev.key==='Enter'){ev.preventDefault();save()}
      if(ev.key==='Escape'){ev.preventDefault();done()}
    });
    startInput.focus();
  });
});

/* === Project Name Inline Edit === */
document.querySelectorAll('.js-name-edit-trigger').forEach(function(trigger){
  trigger.addEventListener('click',function(e){
    e.stopPropagation();
    var c=this.closest('.js-name-ctnr');
    c.querySelector('.js-projekt-name').style.display='none';
    this.style.display='none';
    var ef=c.querySelector('.js-name-edit-form');
    ef.style.display='inline-flex';
    ef.querySelector('input').focus();
  });
});

document.querySelectorAll('.js-name-save').forEach(function(btn){
  btn.addEventListener('click',function(e){
    e.stopPropagation();
    var c=this.closest('.js-name-ctnr'),i=c.querySelector('input'),n=i.value,d=c.closest('.projekt-card');
    if(!d)return;
    fetch('/projekt/'+d.dataset.projectId+'/update-name',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'name='+encodeURIComponent(n)})
      .then(function(r){if(!r.ok)return r.json().then(function(e){throw new Error(e.error)});return r.json()})
      .then(function(dt){
        c.querySelector('.js-projekt-name').textContent=dt.name;
        c.querySelector('.js-projekt-name').style.display='';
        btn.style.display='';
        c.querySelector('.js-name-edit-form').style.display='none';
        c.querySelector('.js-name-edit-trigger').style.display='';
        d.dataset.projectName=dt.name;
        showToast('Projekt umbenannt','success');launchConfetti(40);
      })
      .catch(function(e){alert('Fehler: '+e.message)});
  });
});

document.querySelectorAll('.js-name-cancel').forEach(function(btn){
  btn.addEventListener('click',function(e){
    e.stopPropagation();
    var c=this.closest('.js-name-ctnr');
    c.querySelector('.js-projekt-name').style.display='';
    c.querySelector('.js-name-edit-trigger').style.display='';
    this.closest('.js-name-edit-form').style.display='none';
  });
});

/* === Flash messages as toasts === */
(function(){
  var notices=document.querySelectorAll('.notification');
  notices.forEach(function(n){
    var msg=n.textContent.trim();var cat='info';
    if(n.classList.contains('is-success'))cat='success';
    else if(n.classList.contains('is-danger'))cat='error';
    showToast(msg,cat);
    n.style.display='none';
  });
})();

/* === Keyboard shortcut: focus search === */
document.addEventListener('keydown',function(e){
  if(e.key==='/'&&!e.ctrlKey&&!e.metaKey&&!e.target.closest('input,textarea,select')){
    e.preventDefault();
    document.getElementById('projekt-suche').focus();
  }
});
</script>
{% endblock %}
