{% extends "base.html" %}

{% block content %}
  <div class="page-section-title">
    <h1>Ausgabe</h1>
    <p>Tuerchips, Parkkarten und Poolfahrzeuge an bestehende User ausgeben.</p>
  </div>

  <section class="card form-card">
    <div class="card-body">
      <h2 class="card-title"><i class="ti ti-key me-1"></i>Medium ausgeben</h2>
      <form method="post" action="{{ url_for('assign_asset') }}">
        <div class="mb-3">
          <label class="form-label">User</label>
          <select class="form-select" name="user_id" required>
            <option value="">Bitte waehlen</option>
            {% for user in users %}
              <option value="{{ user.id }}">{{ user.full_name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="mb-3">
          <label class="form-label">Typ</label>
          <select class="form-select" name="asset_type" id="asset_type" required>
            <option value="chip" {% if selected_asset_type == 'chip' %}selected{% endif %}>Türchip</option>
            <option value="parking_card" {% if selected_asset_type == 'parking_card' %}selected{% endif %}>Parkkarte</option>
            <option value="pool_vehicle" {% if selected_asset_type == 'pool_vehicle' %}selected{% endif %}>Poolfahrzeug</option>
          </select>
        </div>
        <div class="mb-3">
          <label class="form-label" id="asset_code_label">{% if selected_asset_type == 'pool_vehicle' %}Kennzeichen{% else %}Kennung{% endif %}</label>
          <input class="form-control" type="text" name="asset_code" id="asset_code" required placeholder="{% if selected_asset_type == 'pool_vehicle' %}z. B. GZ-CC-123{% else %}{{ input_placeholder }}{% endif %}">
        </div>
        <button class="btn btn-primary" type="submit"><i class="ti ti-check me-1"></i>Ausgabe speichern</button>
      </form>
    </div>
  </section>
  <script>
    (() => {
      const select = document.getElementById("asset_type");
      const label = document.getElementById("asset_code_label");
      const input = document.getElementById("asset_code");
      if (!select || !label || !input) return;

      const syncField = () => {
        if (select.value === "pool_vehicle") {
          label.textContent = "Kennzeichen";
          input.placeholder = "z. B. GZ-CC-123";
        } else {
          label.textContent = "Kennung";
          input.placeholder = select.value === "chip" ? "z. B. CHIP-1001" : "z. B. PARK-2001";
        }
      };

      select.addEventListener("change", syncField);
      syncField();
    })();
  </script>
{% endblock %}