{% extends 'base.html' %}
{% block title %}{{ zbiorka.nazwa }}{% endblock %}
{% block content %}
<div class="container my-4">
  <!-- Główna karta zbiórki -->
  <div class="card mb-4 shadow-sm">
    <div class="card-header bg-secondary text-white">
      <h3 class="card-title mb-0"></h3>{{ zbiorka.nazwa }}</h3>
    </div>
    <div class="card-body">
      <div class="row">
        <!-- Lewa kolumna: opis i postęp -->
        <div class="col-md-8">
          <h5>Opis:</h5>
          <div class="mb-3">
            {{ zbiorka.opis | markdown }}
          </div>
          {% set progress = (zbiorka.stan / zbiorka.cel * 100) if zbiorka.cel > 0 else 0 %}
          <h5>Postęp:</h5>
          <div class="progress mb-3">
            <div class="progress-bar progress-bar-striped progress-bar-animated"
                 role="progressbar"
                 style="width: {{ progress if progress < 100 else 100 }}%;"
                 aria-valuenow="{{ progress }}"
                 aria-valuemin="0"
                 aria-valuemax="100">
                 {{ progress|round(2) }}%
            </div>
          </div>
          
        </div>
        <!-- Prawa kolumna: sekcja "Wspomóż" -->
        <div class="col-md-4">
          <div class="card wspomoz-card mb-3">
            <div class="card-body">

              <p class="card-text">
                <strong>Numer konta:</strong>
                <span class="fs-4">{{ zbiorka.numer_konta }}</span>
              </p>
              <p class="card-text">
                <strong>Telefon BLIK:</strong>
                <span class="fs-4">{{ zbiorka.numer_telefonu_blik }}</span>
              </p>
              {% if not zbiorka.ukryj_kwote %}
              <hr>
              <p class="card-text">
                <strong>Cel zbiórki:</strong>
                <span class="fs-4">{{ zbiorka.cel|round(2) }} PLN</span>
              </p>
              <p class="card-text">
                <strong>Stan zbiórki:</strong>
                <span class="fs-4">{{ zbiorka.stan|round(2) }} PLN</span>
              </p>
              {% endif %}
            </div>
          </div>
          
        </div>

      </div>
      <div class="d-flex justify-content-between">
        {% if current_user.is_authenticated and current_user.is_admin %}
          <a href="{{ url_for('admin_dodaj_wplate', zbiorka_id=zbiorka.id) }}" class="btn btn-primary">Dodaj wpłatę</a>
        {% endif %}
        <a href="{{ url_for('index') }}" class="btn btn-primary">Powrót do listy</a>
      </div>
    </div>
  </div>
  
  <!-- Karta z historią wpłat -->
  <div class="card shadow-sm">
    <div class="card-header bg-secondary text-white">
      <h3 class="card-title mb-0">Historia wpłat</h3>
    </div>
    <div class="card-body">
      {% if zbiorka.wplaty|length > 0 %}
        <ul class="list-group">
          {% for w in zbiorka.wplaty %}
            <li class="list-group-item">
              <strong>{{ w.data.strftime('%Y-%m-%d %H:%M:%S') }}</strong> – {{ w.kwota|round(2) }} PLN
              {% if w.opis %}
                <em class="text-muted">({{ w.opis }})</em>
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      {% else %}
        <p class="text-center">Aktualnie brak wpłat..</p>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}