{% extends 'base.html' %}
{% block title %}Edytuj stan zbiórki{% endblock %}

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

  <!-- Nawigacja -->
  <div class="d-flex align-items-center gap-2 mb-3">
    <a href="{{ url_for('zbiorka', zbiorka_id=zbiorka.id) }}" class="btn btn-sm btn-outline-light border">← Szczegóły
      zbiórki</a>
    <a href="{{ url_for('admin_dashboard') }}" class="btn btn-sm btn-outline-light border">← Panel Admina</a>
  </div>

  {# Obliczenia wstępne (do inicjalnego podglądu) #}
  {% set has_cel = (zbiorka.cel is defined and zbiorka.cel and zbiorka.cel > 0) %}
  {% set progress = (zbiorka.stan / zbiorka.cel * 100) if has_cel else 0 %}
  {% set progress_clamped = 100 if progress > 100 else (0 if progress < 0 else progress) %} <div class="card shadow-sm"
    data-module="edit-stan" data-cel="{{ (zbiorka.cel|round(2)) if has_cel else 0 }}">
    <div class="card-header bg-secondary text-white d-flex flex-wrap align-items-center justify-content-between gap-2">
      <h3 class="card-title mb-0">Edytuj stan: <span class="fw-semibold">{{ zbiorka.nazwa }}</span></h3>
      <div class="d-flex align-items-center flex-wrap gap-2">
        {% if has_cel %}
        <span class="badge bg-dark border" style="border-color: var(--border);">Cel: {{ zbiorka.cel|round(2) }}
          PLN</span>
        {% endif %}
        <span class="badge bg-dark border" style="border-color: var(--border);">Obecnie: {{ zbiorka.stan|round(2) }}
          PLN</span>
      </div>
    </div>

    <!-- Mini progress (aktualny) -->
    <div class="px-3 pt-3">
      <div class="progress" role="progressbar" aria-valuenow="{{ progress_clamped|round(2) }}" aria-valuemin="0"
        aria-valuemax="100" aria-label="Postęp zbiórki {{ progress_clamped|round(0) }} procent">
        <div class="progress-bar" style="width: {{ progress_clamped }}%;"></div>

      </div>
      <small class="text-muted d-block mt-1 mb-2">Aktualnie: {{ progress|round(1) }}%</small>
    </div>

    <div class="card-body pt-0">
      <form method="post" novalidate>
        {# {{ form.csrf_token }} #}

        <!-- Nowy stan -->
        <div class="mb-3">
          <label for="stan" class="form-label">Nowy stan zbiórki</label>
          <div class="input-group">
            <span class="input-group-text">PLN</span>
            <input type="number" step="0.01" min="0" class="form-control" id="stan" name="stan"
              value="{{ zbiorka.stan|round(2) }}" required aria-describedby="stanHelp">
          </div>
          <div id="stanHelp" class="form-text">
            Wpisz łączną zebraną kwotę po zmianie (nie przyrost). Skorzystaj z szybkich korekt poniżej.
          </div>

          <!-- Szybkie korekty -->
          <div class="d-flex flex-wrap gap-2 mt-2">
            {% for delta in [10,50,100,200] %}
            <button type="button" class="btn btn-sm btn-outline-light border btn-delta" data-delta="{{ delta }}">+{{
              delta }} PLN</button>
            <button type="button" class="btn btn-sm btn-outline-light border btn-delta" data-delta="-{{ delta }}">-{{
              delta }} PLN</button>
            {% endfor %}
            {% if has_cel %}
            <button type="button" class="btn btn-sm btn-outline-light border btn-set"
              data-value="{{ zbiorka.cel|round(2) }}">Ustaw: do celu</button>
            {% set brakujace = (zbiorka.cel - zbiorka.stan) if (zbiorka.cel - zbiorka.stan) > 0 else 0 %}
            {% if brakujace > 0 %}
            <span class="badge bg-dark border" style="border-color: var(--border);">Brakuje: {{ brakujace|round(2) }}
              PLN</span>
            {% endif %}
            {% endif %}
            <button type="button" class="btn btn-sm btn-outline-light border btn-set" data-value="0">Ustaw: 0</button>
          </div>
        </div>

        <!-- Podgląd po zmianie -->
        <div class="mb-3">
          <div class="card bg-dark border" style="border-color: var(--border);">
            <div class="card-body">
              <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                <div>
                  <div class="small text-muted">Podgląd po zapisaniu</div>
                  <div class="fw-semibold">
                    Procent realizacji:
                    <span id="previewPct">{{ progress|round(1) }}</span>%
                  </div>
                </div>
              </div>
              <div class="mt-2">
                <div class="progress" aria-hidden="true">
                  <div class="progress-bar" style="width: {{ progress_clamped }}%;"></div>

                </div>
                <small class="text-muted d-block mt-1" id="previewNote">
                  {% if has_cel %}
                  {% if brakujace > 0 %}
                  Do celu brakuje: {{ brakujace|round(2) }} PLN
                  {% elif brakujace == 0 %}
                  Cel osiągnięty.
                  {% else %}
                  Przekroczono cel o: {{ (brakujace * -1)|round(2) }} PLN
                  {% endif %}
                  {% else %}
                  Brak zdefiniowanego celu — procent nie jest wyliczany.
                  {% endif %}
                </small>
              </div>
            </div>
          </div>
        </div>

        <!-- CTA -->
        <div class="d-flex flex-wrap gap-2">
          <button type="submit" class="btn btn-success">Aktualizuj stan</button>
          <a href="{{ url_for('zbiorka', zbiorka_id=zbiorka.id) }}" class="btn btn-outline-light border">Anuluj</a>
        </div>
      </form>
    </div>
</div>
</div>
{% endblock %}

{% block extra_scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='js/edytuj_stan.js') }}"></script>
{% endblock %}