{% extends 'base.html' %}
{% block title %}{{ zbiorka.nazwa }}{% endblock %}

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

  {# Postęp 0–100 #}
  {% 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) %} {% set
    is_done=(progress_clamped>= 100) %}

    <!-- Nagłówek -->
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
      <h2 class="mb-0">{{ zbiorka.nazwa }}</h2>
      <div class="d-flex flex-wrap align-items-center gap-2">
        {% if is_done %}
        <span class="badge rounded-pill" style="background: var(--accent); color:#111;">Zrealizowana</span>
        {% endif %}
        {% if zbiorka.ukryj_kwote %}
        <span class="badge bg-secondary">Kwoty ukryte</span>
        {% else %}
        <span class="badge bg-success">Kwoty widoczne</span>
        {% endif %}
      </div>
    </div>

    <div class="row g-4">
      <!-- Kolumna: opis + progress -->
      <div class="col-md-8">
        <div class="card shadow-sm h-100">
          <div class="card-body">
            <h5 class="mb-2">Opis</h5>
            <div class="mb-4">
              {{ zbiorka.opis | markdown }}
            </div>

            <h5 class="mb-2">Postęp</h5>
            <div class="progress mb-2" 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">
              {% if zbiorka.ukryj_kwote %}
              —
              {% else %}
              {{ progress|round(1) }}%
              {% endif %}
            </small>
          </div>
        </div>
      </div>

      <!-- Kolumna: płatności (sticky) -->
      <div class="col-md-4">
        <div class="card shadow-sm wspomoz-card position-sticky" style="top: 1rem;">
          <div class="card-body">
            <div class="mb-3">
              <div class="d-flex align-items-center justify-content-between">
                <strong>Numer konta</strong>
                <button class="btn btn-sm btn-outline-light border" type="button"
                  data-copy-target="#ibanDisplay">Kopiuj</button>
              </div>
              <div class="fs-5" id="ibanDisplay">{{ zbiorka.numer_konta }}</div>
            </div>

            <div class="mb-3">
              <div class="d-flex align-items-center justify-content-between">
                <strong>Telefon BLIK</strong>
                <button class="btn btn-sm btn-outline-light border" type="button"
                  data-copy-target="#blikDisplay">Kopiuj</button>
              </div>
              <div class="fs-5" id="blikDisplay">{{ zbiorka.numer_telefonu_blik }}</div>
            </div>

            {% if not zbiorka.ukryj_kwote %}
            <hr class="my-3">
            <div class="d-flex flex-column gap-1">
              {% if has_cel %}
              <div><strong>Cel:</strong> <span class="fs-6">{{ zbiorka.cel|round(2) }} PLN</span></div>
              {% endif %}
              <div><strong>Stan:</strong> <span class="fs-6">{{ zbiorka.stan|round(2) }} PLN</span></div>
              {% if has_cel %}
              {% set brak = (zbiorka.cel - zbiorka.stan) %}
              <small class="text-muted">
                {% if brak > 0 %}
                Do celu brakuje: {{ brak|round(2) }} PLN
                {% elif brak == 0 %}
                Cel osiągnięty.
                {% else %}
                Przekroczono cel o: {{ (brak * -1)|round(2) }} PLN
                {% endif %}
              </small>
              {% endif %}
            </div>
            {% endif %}

            {% if current_user.is_authenticated and current_user.is_admin %}
            <div class="d-grid mt-3">
              <a href="{{ url_for('dodaj_wplate', zbiorka_id=zbiorka.id) }}" class="btn btn-primary">Dodaj
                wpłatę</a>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

    <!-- Historia wpłat -->
    <div class="card shadow-sm mt-4">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h5 class="card-title mb-0">Historia wpłat</h5>
        {% if zbiorka.wplaty|length > 0 %}
        <small class="text-muted">Łącznie pozycji: {{ zbiorka.wplaty|length }}</small>
        {% endif %}
      </div>
      <div class="card-body">
        {% if zbiorka.wplaty and zbiorka.wplaty|length > 0 %}
        <ul class="list-group list-group-flush">
          {% for w in zbiorka.wplaty %}
          <li class="list-group-item bg-transparent d-flex flex-wrap justify-content-between align-items-center">
            <div class="me-3">
              <strong>{{ w.data.strftime('%Y-%m-%d %H:%M:%S') }}</strong>
              {% if w.opis %}
              <span class="text-muted">— {{ w.opis }}</span>
              {% endif %}
            </div>
            <span class="badge bg-dark border ms-auto" style="border-color: var(--border);">
              {{ w.kwota|round(2) }} PLN
            </span>
          </li>
          {% endfor %}
        </ul>
        {% else %}
        <div class="text-center py-4">
          <h6 class="mb-1">Brak wpłat</h6>
          <p class="text-muted mb-0">Gdy pojawią się pierwsze wpłaty, zobaczysz je tutaj.</p>
        </div>
        {% endif %}
      </div>
    </div>

    <!-- Akcje dolne -->
    <div class="d-flex gap-2 justify-content-between mt-3">
      <div></div>
      <a href="{{ url_for('index') }}" class="btn btn-outline-light border">Powrót do listy</a>
    </div>

</div>
{% endblock %}

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