{% extends "base.html" %}

{% block content %}
<div class="container">

  <!-- ================= COMPACT PRINT VIEW (1-PAGE A4) ================= -->
  <div class="print-only">
    <!-- Single-line condensed header -->
    <div class="print-header-singleline">
      <div class="print-left">
        <span class="print-logo">🥨 Schmankerl</span>
        <strong>{{ event.title if event else 'Brotzeitrunde' }}</strong> 
        <span class="print-date">({{ event.event_date.strftime('%d.%m.%Y') if event else '' }})</span>
      </div>
      <div class="print-right">
        <span>Teilnehmer: <strong>{{ orders|length }}</strong></span>
        <span> | </span>
        <span>Einkauf: <strong>{{ "%.2f"|format(total_revenue) }} €</strong></span>
        {% if event and event.sponsor_name %}
        <span> | </span>
        <span class="print-sponsor">🎉 Sponsor: <strong>{{ event.sponsor_name }}</strong></span>
        {% endif %}
      </div>
    </div>

    <!-- Compact Sammelliste -->
    <div class="print-sammel-box">
      <span class="print-sammel-title">🛒 Einkauf (Bäcker & Metzger):</span>
      {% for name, data in item_sums.items() %}
      <span class="print-item-pill">
        <strong>{{ data.quantity }}x</strong> {{ name }}
      </span>
      {% else %}
      <span>Keine Artikel</span>
      {% endfor %}
    </div>

    <!-- Ausgabeliste zum Abhaken -->
    <table class="print-table">
      <thead>
        <tr>
          <th style="width: 28px; text-align: center;">☐</th>
          <th style="width: 25%;">Kollege / Name</th>
          <th>Bestellte Artikel</th>
          <th style="width: 70px; text-align: right;">Betrag</th>
          <th style="width: 85px; text-align: center;">Kasse</th>
        </tr>
      </thead>
      <tbody>
        {% for order in orders %}
        <tr>
          <td style="text-align: center; font-size: 10pt;">☐</td>
          <td>
            <strong>{{ order.display_name }}</strong>
            {% if order.user and order.user.role == 'guest' %}<small class="guest-tag">(Gast)</small>{% endif %}
          </td>
          <td class="print-items-cell">
            {% for item in order.items %}
            <span>{{ item.quantity }}x {{ item.product.name }}</span>{% if not loop.last %}, {% endif %}
            {% endfor %}
          </td>
          <td style="text-align: right; font-weight: bold;">
            {% if event and event.sponsor_name %}
            <span style="font-size: 8pt; color: #555;">Sponsor</span>
            {% else %}
            {{ "%.2f"|format(order.total_price) }} €
            {% endif %}
          </td>
          <td style="text-align: center; font-size: 8pt;">
            {% if event and event.sponsor_name %}
            Übernommen
            {% elif order.is_paid %}
            Bezahlt ✓
            {% else %}
            Offen
            {% endif %}
          </td>
        </tr>
        {% else %}
        <tr><td colspan="5" style="text-align: center;">Keine Bestellungen vorhanden.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- ================= NORMAL SCREEN VIEW ================= -->
  <div class="no-print">
    
    <!-- Einkäufer Header -->
    <div class="buyer-header">
      <div>
        <span class="badge-role" style="margin-bottom: 6px;">🛒 Einkäufer- & Kassen-Zentrale</span>
        <h1>{{ event.title if event else 'Brotzeitrunde' }}</h1>
        <p class="admin-sub">
          Termin: <strong>{{ event.event_date.strftime('%d.%m.%Y') if event else '' }}</strong> | 
          Bestellschluss: <strong>{{ event.deadline.strftime('%d.%m. um %H:%M Uhr') if event else '' }}</strong>
          {% if event and event.buyer %}
          | 🏃 Einkäufer: <strong>{{ event.buyer.first_name }} {{ event.buyer.last_name }}</strong>
          {% endif %}
        </p>
      </div>

      <div class="buyer-actions">
        {% if event %}
        <button onclick="copyShoppingList()" class="btn-primary">📋 Einkaufsliste kopieren</button>
        <button onclick="window.print()" class="btn-secondary">🖨️ Liste drucken (A4)</button>
        <a href="/events/{{ event.id }}/calendar.ics" class="btn-secondary" style="text-decoration: none; display: inline-flex; align-items: center;">📅 Outlook (.ics)</a>
        {% endif %}
        {% if current_user.role == 'admin' %}
        <a href="/admin" class="btn-outline" style="text-decoration: none;">⚙️ Zur Verwaltung</a>
        {% endif %}
      </div>
    </div>

    {% if success %}
    <div class="alert-success" style="margin-bottom: 20px;">
      ✓ {{ success }}
    </div>
    {% endif %}

    <!-- EVENT-LEISTE (Falls mehrere Runden existieren) -->
    {% if all_events|length > 1 %}
    <div class="events-ribbon">
      <div class="events-ribbon-title">
        <span>📅 Runde wählen:</span>
      </div>
      <div class="events-ribbon-list">
        {% for ev in all_events %}
        <a href="/einkauf?event_id={{ ev.id }}" class="event-chip {% if event and event.id == ev.id %}active{% endif %} {% if ev.status == 'completed' %}completed{% endif %}">
          <span class="chip-date">{{ ev.event_date.strftime('%d.%m.') }}</span>
          <span class="chip-title">{{ ev.title }}</span>
          {% if ev.status == 'open' %}
          <span class="chip-badge open">🟢 Offen</span>
          {% elif ev.status == 'completed' %}
          <span class="chip-badge comp">🏁 Abgeschlossen</span>
          {% else %}
          <span class="chip-badge closed">🔴 Geschlossen</span>
          {% endif %}
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    {% if event %}

      {% if event.sponsor_name %}
      <div class="sponsor-highlight-card">
        <div class="sponsor-icon">🎁</div>
        <div>
          <h3>Diese Runde wird gesponsert!</h3>
          <p>Sponsor / Anlass: <strong>{{ event.sponsor_name }}</strong> übernimmt die Gesamtrechnung von <strong>{{ "%.2f"|format(total_revenue) }} €</strong> für das gesamte Team.</p>
        </div>
      </div>
      {% endif %}

      <!-- Stats Cards -->
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-label">Gesamtsumme Einkauf</div>
          <div class="stat-value">{{ "%.2f"|format(total_revenue) }} €</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Bereits bezahlt</div>
          <div class="stat-value success">
            {% if event.sponsor_name %}Gesponsert{% else %}{{ "%.2f"|format(total_paid) }} €{% endif %}
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Noch offen</div>
          <div class="stat-value warning">
            {% if event.sponsor_name %}0,00 €{% else %}{{ "%.2f"|format(total_revenue - total_paid) }} €{% endif %}
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Teilnehmer</div>
          <div class="stat-value">{{ orders|length }} Personen</div>
        </div>
      </div>

      <!-- 2-Column Responsive Layout -->
      <div class="admin-columns">
        
        <!-- Sammelliste für Metzger & Bäcker -->
        <div class="admin-card">
          <h2>🛒 Sammelliste für Metzger & Bäcker</h2>
          <p class="card-hint">Das musst du für die gesamte Runde besorgen:</p>
          
          <div class="shopping-table-wrapper">
            <table class="data-table">
              <thead>
                <tr>
                  <th>Artikel</th>
                  <th style="text-align: right;">Gesamtmenge</th>
                </tr>
              </thead>
              <tbody>
                {% for name, data in item_sums.items() %}
                <tr>
                  <td><strong>{{ name }}</strong></td>
                  <td style="text-align: right; font-size: 1.25rem; font-weight: 800; color: var(--accent);">
                    {{ data.quantity }} {{ data.unit }}
                  </td>
                </tr>
                {% else %}
                <tr><td colspan="2" class="empty-cell">Noch keine Bestellungen eingegangen.</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>

        <!-- Einzelübersicht / Strichliste zum Abhaken -->
        <div class="admin-card">
          <h2>👥 Wer bekommt was? (Kasse & Abhaken)</h2>
          <p class="card-hint">Tippe auf den Status, um bezahlt/offen umzuschalten:</p>

          <div class="orders-table-wrapper">
            <table class="data-table">
              <thead>
                <tr>
                  <th>Kollege / Gast</th>
                  <th>Bestellung</th>
                  <th>Betrag</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {% for order in orders %}
                <tr>
                  <td>
                    <strong>{{ order.display_name }}</strong>
                    {% if order.user and order.user.role == 'guest' %}
                    <span class="badge-role guest">Gast</span>
                    {% elif not order.user and order.guest_display_name %}
                    <span class="badge-role" style="background: rgba(148, 163, 184, 0.15); color: #cbd5e1;">Gast</span>
                    {% endif %}
                  </td>
                  <td>
                    <ul class="mini-items-list">
                      {% for item in order.items %}
                      <li><strong>{{ item.quantity }}x</strong> {{ item.product.name }}</li>
                      {% endfor %}
                    </ul>
                  </td>
                  <td>
                    <strong>{{ "%.2f"|format(order.total_price) }} €</strong>
                    {% if event.sponsor_name %}<br><small class="text-muted">von Sponsor</small>{% endif %}
                  </td>
                  <td>
                    {% if event.sponsor_name %}
                    <span class="badge-btn paid" style="cursor: default;">✓ Gesponsert</span>
                    {% else %}
                    <form action="/admin/toggle-paid/{{ order.id }}" method="POST" style="margin: 0;">
                      <button type="submit" class="badge-btn {% if order.is_paid %}paid{% else %}unpaid{% endif %}">
                        {% if order.is_paid %}✓ Bezahlt{% else %}⏳ Offen{% endif %}
                      </button>
                    </form>
                    {% endif %}
                  </td>
                </tr>
                {% else %}
                <tr><td colspan="4" class="empty-cell">Noch keine Bestellungen vorhanden.</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>

      </div>

    {% else %}
    <div class="empty-state">
      <div class="empty-icon">🏖️</div>
      <h2>Keine aktive Runde vorhanden</h2>
      <p>Aktuell ist keine Brotzeit geplant.</p>
    </div>
    {% endif %}

  </div>
</div>

<script>
  function copyShoppingList() {
    let text = "🥨 Einkaufsliste für " + {{ (event.title if event else 'Brotzeit') | tojson }} + " (" + {{ (event.event_date.strftime('%d.%m.%Y') if event else '') | tojson }} + "):\n\n";
    {% for name, data in item_sums.items() %}
    text += "• " + {{ name | tojson }} + ": " + {{ (data.quantity ~ ' ' ~ data.unit) | tojson }} + "\n";
    {% endfor %}
    text += "\nGesamtsumme: {{ '%.2f'|format(total_revenue) }} €";

    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).then(() => {
        alert("Einkaufsliste in die Zwischenablage kopiert! Kann direkt in WhatsApp oder Slack geteilt werden.");
      }).catch(() => {
        prompt("Kopiere die Einkaufsliste:", text);
      });
    } else {
      prompt("Kopiere die Einkaufsliste:", text);
    }
  }
</script>
{% endblock %}