{% extends "base.html" %}
{% block content %}
<div class="row g-4">
    <div class="col-lg-5">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title mb-3">Konfiguration</h5>

                <div class="mb-3">
                    <label class="form-label">Modell</label>
                    <div class="btn-group w-100" role="group">
                        <input type="radio" class="btn-check" name="model" id="model-sub" value="subscription" checked>
                        <label class="btn btn-outline-primary" for="model-sub">Subscription</label>
                        <input type="radio" class="btn-check" name="model" id="model-met" value="metered">
                        <label class="btn btn-outline-primary" for="model-met">Metered</label>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Preistyp</label>
                    <select class="form-select" id="pricing-mode">
                        {% for v, label in pricing_modes %}
                        <option value="{{ v }}">{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>

                <!-- Subscription-spezifisch -->
                <div id="sub-controls">
                    <div class="mb-3">
                        <label class="form-label">Segment</label>
                        <select class="form-select" id="segment">
                            {% for v, label in segments %}
                            <option value="{{ v }}">{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Individualrabatt auf Endkundenpreis (%)</label>
                        <input type="number" class="form-control" id="end-discount"
                               min="0" max="100" step="0.5" value="0">
                        <div class="form-text">Wirkt nur auf den Endkundenpreis; Partnerpreis bleibt unverändert.</div>
                    </div>
                </div>

                <!-- Metered-spezifisch -->
                <div id="met-controls" class="d-none">
                    <div class="mb-3">
                        <label class="form-label">Commitment-Level</label>
                        <select class="form-select" id="level">
                            {% for code, label in metered_levels %}
                            <option value="{{ code }}">{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <!-- Mengen Subscription -->
                <div id="sub-qty">
                    <hr>
                    <label class="form-label">Mengen (Mailboxen pro Komponente)</label>
                    {% for code, label in subscription_editions %}
                      {% if code == "RE" %}
                      <div class="d-flex justify-content-between align-items-center mb-2">
                          <span class="d-flex align-items-center gap-2">
                              <input type="checkbox" id="replica-enabled" class="form-check-input mt-0">
                              <label for="replica-enabled" class="mb-0">
                                  {{ label }} <span class="text-muted small">(RE) — wenn aktiv: = EE + WE</span>
                              </label>
                          </span>
                          <input type="number" min="0" step="1" value="0"
                                 class="form-control form-control-sm qty-input qty-sub"
                                 data-edition="RE" readonly tabindex="-1">
                      </div>
                      {% else %}
                      <div class="d-flex justify-content-between align-items-center mb-2">
                          <span>{{ label }} <span class="text-muted small">({{ code }})</span></span>
                          <input type="number" min="0" step="1" value="0"
                                 class="form-control form-control-sm qty-input qty-sub"
                                 data-edition="{{ code }}">
                      </div>
                      {% endif %}
                    {% endfor %}
                    <div class="form-text">
                        Tier wird je Komponente aus deren eigener Menge bestimmt; nur Replica
                        staffelt über EE + WE. Mindestabnahme: 50 Mailboxen (EE + WE),
                        Active Sync ebenfalls min. 50 und höchstens so viele wie Mailboxen.
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="col-lg-7">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <h5 class="card-title mb-0">Ergebnis</h5>
                    <div class="d-flex align-items-center gap-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="copy-table" disabled>Tabelle kopieren</button>
                        <span class="badge bg-secondary badge-mode" id="result-mode">–</span>
                    </div>
                </div>
                <div id="result-area" class="text-muted">Bitte Mengen eingeben.</div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    window.CSRF_TOKEN = "{{ csrf_token() }}";
</script>
<script src="{{ url_for('static', filename='calc.js') }}"></script>
{% endblock %}