{% extends "base.html" %}

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

  <!-- Multi-Event Picker (wenn mehrere anstehende Runden offen sind) -->
  {% if open_events|length > 1 %}
  <div class="multi-event-banner">
    <span>📅 Weitere offene Termine:</span>
    <div class="multi-event-chips">
      {% for ev in open_events %}
      <a href="/?event_id={{ ev.id }}{% if is_valid_guest %}&token={{ guest_token }}{% endif %}" class="mini-chip {% if event and event.id == ev.id %}active{% endif %}">
        {{ ev.event_date.strftime('%d.%m.') }} – {{ ev.title }}
      </a>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <!-- Header Banner -->
  {% if event %}
  <div class="banner {% if is_closed %}banner-closed{% endif %}">
    <div class="banner-top-row">
      <div class="banner-badge {% if is_closed %}closed{% endif %}">
        {% if is_closed %}🔴 Runde geschlossen{% else %}🟢 Runde geöffnet{% endif %}
      </div>
      <div class="countdown-container" id="countdownContainer">
        <span class="countdown-label">Frist:</span>
        <span class="countdown-timer" id="countdownTimer">Berechne...</span>
      </div>
    </div>

    <h1>{{ event.title }}</h1>
    <p class="banner-sub">
      Brotzeit-Tag: <strong>{{ event.event_date.strftime('%d.%m.%Y') }}</strong> &nbsp;|&nbsp; 
      Bestellschluss: <strong>{{ event.deadline.strftime('%d.%m.%Y um %H:%M Uhr') }}</strong>
    </p>

    {% if event.sponsor_name %}
    <div class="sponsor-badge-banner">
      🎉 <strong>Runde gesponsert:</strong> Die Brotzeit geht heute auf <strong>{{ event.sponsor_name }}</strong>!
    </div>
    {% endif %}

    <div class="banner-stats">
      <span>👥 Bereits <strong>{{ order_count }}</strong> Bestellungen von Kollegen eingegangen</span>
    </div>
  </div>

  {% if is_closed %}
  <div class="closed-notice-bar">
    🔒 <strong>Bestellschluss erreicht:</strong> Diese Bestellrunde ist geschlossen. Änderungen oder neue Bestellungen sind nicht mehr möglich. Wende dich bei Notfällen direkt an den Organisator.
  </div>
  {% endif %}

  <!-- Order Form -->
  <form action="/order" method="POST" class="order-form" id="orderForm">
    <input type="hidden" name="event_id" value="{{ event.id }}">
    <input type="hidden" name="guest_token" value="{{ guest_token }}">

    <div class="form-grid">
      <!-- Left: Products -->
      <div class="products-section">
        <h2>1. Brotzeit auswählen</h2>
        <div class="product-list">
          {% for product in products %}
          {% set current_qty = user_items.get(product.id, 0) %}
          <div class="product-card {% if is_closed %}disabled{% endif %}" data-price="{{ product.price }}" data-id="{{ product.id }}">
            <div class="product-info">
              <h3>{{ product.name }}</h3>
              <p class="product-desc">{{ product.description }}</p>
              <div class="product-price">
                {% if event.sponsor_name %}
                <span style="text-decoration: line-through; opacity: 0.6; font-size: 0.9rem;">{{ "%.2f"|format(product.price) }} €</span>
                <span style="color: var(--accent-gold); font-weight: 700;"> 0,00 € (Gesponsert)</span>
                {% else %}
                {{ "%.2f"|format(product.price) }} € <small>/ {{ product.unit }}</small>
                {% endif %}
              </div>
            </div>
            <div class="quantity-control">
              <button type="button" class="qty-btn" onclick="changeQty({{ product.id }}, -1)" {% if is_closed %}disabled{% endif %}>-</button>
              <input type="number" id="qty_{{ product.id }}" name="qty_{{ product.id }}" value="{{ current_qty }}" min="0" max="50" class="qty-input" onchange="updateTotal()" {% if is_closed %}disabled{% endif %}>
              <button type="button" class="qty-btn" onclick="changeQty({{ product.id }}, 1)" {% if is_closed %}disabled{% endif %}>+</button>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>

      <!-- Right: User Details & Summary -->
      <div class="summary-section">
        <div class="summary-card">
          <h2>2. Angaben & Übersicht</h2>
          
          {% if current_user %}
          <div class="logged-in-badge">
            <div class="user-avatar">👤</div>
            <div>
              <strong>{{ current_user.first_name }} {{ current_user.last_name }}</strong>
              {% if current_user.role == 'guest' %}<small>(Gast)</small>{% endif %}
              <br>
              <small class="text-muted">{{ current_user.email }}</small>
            </div>
          </div>
          {% else %}
          <!-- Gast Angaben -->
          <div class="guest-order-box">
            <div class="privacy-note" style="margin-bottom: 12px;">
              👋 <strong>Gast- & Dienstleister-Bestellung:</strong><br>
              Du bestellst ohne dauerhaftes Konto für diesen Termin ({{ event.event_date.strftime('%d.%m.') }}) mit.
            </div>
            <div class="input-group">
              <label for="g_first_name">Vorname / Name *</label>
              <input type="text" id="g_first_name" name="guest_first_name" required placeholder="z. B. Tobias">
            </div>
            <div class="input-group">
              <label for="g_last_name">Firma / Abteilung (optional)</label>
              <input type="text" id="g_last_name" name="guest_last_name" placeholder="z. B. IT-Service Müller">
            </div>
            <div class="input-group">
              <label for="g_email">E-Mail (optional)</label>
              <input type="email" id="g_email" name="guest_email" placeholder="name@firma.de">
            </div>
          </div>
          {% endif %}

          {% if existing_order %}
          <div class="notice-box">
            ℹ️ Du hast bereits für diese Runde bestellt ({% if existing_order.is_paid %}<strong>Bereits bezahlt ✓</strong>{% else %}Noch offen{% endif %}).
            {% if not is_closed %}Du kannst deine Mengen anpassen und aktualisieren.{% endif %}
          </div>
          {% endif %}

          <hr class="divider">

          <div class="order-total-box">
            <div class="total-label">Gesamtsumme:</div>
            <div class="total-amount" id="totalAmount">0,00 €</div>
          </div>

          {% if event.sponsor_name %}
          <div style="font-size: 0.85rem; color: var(--accent-gold); margin-bottom: 14px; text-align: center;">
            🎁 Die Rechnung wird von <strong>{{ event.sponsor_name }}</strong> übernommen!
          </div>
          {% endif %}

          <button type="submit" class="btn-submit" id="submitBtn" {% if is_closed %}disabled{% endif %}>
            {% if is_closed %}
            🔒 Bestellschluss vorüber
            {% elif existing_order %}
            🥨 Bestellung aktualisieren
            {% else %}
            🥨 Bestellung verbindlich abschicken
            {% endif %}
          </button>
          
          {% if not is_closed %}
          <small class="form-hint">Du kannst deine Bestellung bis zum Bestellschluss jederzeit hier anpassen.</small>
          {% else %}
          <small class="form-hint text-warning">Die Frist ist abgelaufen.</small>
          {% endif %}
        </div>
      </div>
    </div>
  </form>

  {% else %}
  <div class="empty-state">
    <div class="empty-icon">🏖️</div>
    <h2>Aktuell keine offene Bestellrunde</h2>
    <p>Für dieses Team ist im Moment keine Brotzeit geplant.</p>
    {% if current_user and current_user.role == 'admin' %}
    <a href="/admin?tab=event" class="btn-primary" style="margin-top: 1rem;">Neue Bestellrunde im Cockpit anlegen</a>
    {% endif %}
  </div>
  {% endif %}

</div>

<script>
  function changeQty(productId, delta) {
    const input = document.getElementById('qty_' + productId);
    if (!input || input.disabled) return;
    let val = parseInt(input.value) || 0;
    val = Math.max(0, val + delta);
    input.value = val;
    updateTotal();
  }

  function updateTotal() {
    let total = 0;
    const cards = document.querySelectorAll('.product-card');
    cards.forEach(card => {
      const price = parseFloat(card.dataset.price) || 0;
      const id = card.dataset.id;
      const qtyInput = document.getElementById('qty_' + id);
      const qty = parseInt(qtyInput ? qtyInput.value : 0) || 0;
      total += price * qty;
    });

    const totalEl = document.getElementById('totalAmount');
    if (totalEl) {
      totalEl.innerText = total.toFixed(2).replace('.', ',') + ' €';
    }
  }

  // --- LIVE COUNTDOWN TIMER ---
  {% if event and not is_closed %}
  const deadlineMs = new Date("{{ event.deadline.isoformat() }}").getTime();

  function updateCountdown() {
    const nowMs = new Date().getTime();
    const diffMs = deadlineMs - nowMs;
    const timerEl = document.getElementById('countdownTimer');
    const containerEl = document.getElementById('countdownContainer');
    const submitBtn = document.getElementById('submitBtn');

    if (diffMs <= 0) {
      if (timerEl) timerEl.innerText = "Abgelaufen (geschlossen)";
      if (containerEl) {
        containerEl.classList.add('expired');
      }
      if (submitBtn) {
        submitBtn.disabled = true;
        submitBtn.innerText = "🔒 Bestellschluss vorüber";
      }
      document.querySelectorAll('.qty-btn').forEach(btn => btn.disabled = true);
      document.querySelectorAll('.qty-input').forEach(inp => inp.disabled = true);
      return;
    }

    const totalSeconds = Math.floor(diffMs / 1000);
    const days = Math.floor(totalSeconds / 86400);
    const hours = Math.floor((totalSeconds % 86400) / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;

    let text = "";
    if (days > 0) {
      text = `${days}T ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
    } else {
      text = `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
    }

    if (timerEl) timerEl.innerText = `⏳ Noch ${text}`;

    if (totalSeconds < 3600 && containerEl) {
      containerEl.classList.add('urgent');
    }
  }

  function pad(num) {
    return num.toString().padStart(2, '0');
  }

  setInterval(updateCountdown, 1000);
  updateCountdown();
  {% elif is_closed %}
  const timerEl = document.getElementById('countdownTimer');
  if (timerEl) timerEl.innerText = "Frist beendet";
  {% endif %}

  document.addEventListener('DOMContentLoaded', updateTotal);
</script>
{% endblock %}