{% extends "base.html" %}

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

  <!-- Header Banner -->
  {% if event %}
  <div class="banner">
    <div class="banner-badge">🟢 Runde geöffnet</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>
    <div class="banner-stats">
      <span>👥 Bereits <strong>{{ order_count }}</strong> Bestellungen eingegangen</span>
    </div>
  </div>

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

    <div class="form-grid">
      <!-- Left: Products -->
      <div class="products-section">
        <h2>1. Brotzeit auswählen</h2>
        <div class="product-list">
          {% for product in products %}
          <div class="product-card" 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">{{ "%.2f"|format(product.price) }} € <small>/ {{ product.unit }}</small></div>
            </div>
            <div class="quantity-control">
              <button type="button" class="qty-btn" onclick="changeQty({{ product.id }}, -1)">-</button>
              <input type="number" id="qty_{{ product.id }}" name="qty_{{ product.id }}" value="0" min="0" max="50" class="qty-input" onchange="updateTotal()">
              <button type="button" class="qty-btn" onclick="changeQty({{ product.id }}, 1)">+</button>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>

      <!-- Right: User Details & Summary -->
      <div class="summary-section">
        <div class="summary-card">
          <h2>2. Deine Angaben</h2>
          <div class="input-group">
            <label for="first_name">Vorname</label>
            <input type="text" id="first_name" name="first_name" required placeholder="z. B. Maxi">
          </div>
          <div class="input-group">
            <label for="last_name">Nachname</label>
            <input type="text" id="last_name" name="last_name" required placeholder="z. B. Muster">
          </div>
          <div class="input-group">
            <label for="email">E-Mail-Adresse</label>
            <input type="email" id="email" name="email" required placeholder="maxi@beispiel.de">
          </div>

          <hr class="divider">

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

          <button type="submit" class="btn-submit" id="submitBtn">
            🥨 Bestellung verbindlich abschicken
          </button>
          <small class="form-hint">Du kannst deine Bestellung bis zum Stichtag jederzeit mit derselben E-Mail-Adresse ändern.</small>
        </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>
    <a href="/admin" class="btn-primary">Neue Bestellrunde im Cockpit anlegen</a>
  </div>
  {% endif %}

</div>

<script>
  function changeQty(productId, delta) {
    const input = document.getElementById('qty_' + productId);
    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.value) || 0;
      total += price * qty;
    });

    document.getElementById('totalAmount').innerText = total.toFixed(2).replace('.', ',') + ' €';
    const submitBtn = document.getElementById('submitBtn');
    if (total > 0) {
      submitBtn.removeAttribute('disabled');
      submitBtn.style.opacity = '1';
    } else {
      submitBtn.style.opacity = '0.7';
    }
  }

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