{% extends 'base.html' %}
{% block title %}Panel Admina{% endblock %}

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

    <!-- Nagłówek + akcje globalne -->
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
        <h2 class="mb-0">Panel Admina</h2>
        <div class="d-flex flex-wrap gap-2">
            <a href="{{ url_for('dodaj_zbiorke') }}" class="btn btn-primary">
                ➕ Dodaj zbiórkę
            </a>
            <a href="{{ url_for('admin_ustawienia') }}" class="btn btn-outline-light border">
                ⚙️ Ustawienia
            </a>
        </div>
    </div>

    <!-- Pigułki: Aktywne / Zrealizowane (zakładki w obrębie panelu) -->
    <ul class="nav nav-pills mb-3" id="adminTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="tab-aktywne" data-bs-toggle="tab" data-bs-target="#pane-aktywne"
                type="button" role="tab" aria-controls="pane-aktywne" aria-selected="true">
                Aktywne zbiórki
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tab-zrealizowane" data-bs-toggle="tab" data-bs-target="#pane-zrealizowane"
                type="button" role="tab" aria-controls="pane-zrealizowane" aria-selected="false">
                Zrealizowane
            </button>
        </li>
    </ul>

    <div class="tab-content">

        <!-- PANE: Aktywne -->
        <div class="tab-pane fade show active" id="pane-aktywne" role="tabpanel" aria-labelledby="tab-aktywne"
            tabindex="0">

            {% if active_zbiorki and active_zbiorki|length > 0 %}
            <div class="table-responsive mb-5">
                <table class="table table-dark table-striped table-hover align-middle">
                    <thead>
                        <tr>
                            <th style="width:72px;">ID</th>
                            <th>Nazwa</th>
                            <th style="width:140px;">Widoczność</th>
                            <th style="width:1%;">Opcje</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for z in active_zbiorki %}
                        <tr>
                            <td class="text-muted">{{ z.id }}</td>
                            <td>
                                <div class="d-flex flex-column">
                                    <span class="fw-semibold">{{ z.nazwa }}</span>
                                    {# opcjonalnie: mini-meta z celem/stanem jeśli masz te pola #}
                                    {% if z.cel is defined or z.stan is defined %}
                                    <small class="text-muted">
                                        {% if z.cel is defined %} Cel: {{ z.cel|round(2) }} PLN {% endif %}
                                        {% if z.stan is defined %} · Stan: {{ z.stan|round(2) }} PLN {% endif %}
                                    </small>
                                    {% endif %}
                                </div>
                            </td>
                            <td>
                                {% if z.ukryta %}
                                <span class="badge bg-secondary border"
                                    style="border-color: var(--border);">Ukryta</span>
                                {% else %}
                                <span class="badge rounded-pill"
                                    style="background: var(--accent); color:#111;">Widoczna</span>
                                {% endif %}
                            </td>
                            <td class="text-end">
                                <!-- Grupa akcji: główne + rozwijane -->
                                <div class="btn-group">
                                    <a href="{{ url_for('edytuj_zbiorka', zbiorka_id=z.id) }}"
                                        class="btn btn-sm btn-outline-light">Edytuj</a>
                                    <button class="btn btn-sm btn-outline-light dropdown-toggle dropdown-toggle-split"
                                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Więcej opcji">
                                        <span class="visually-hidden">Więcej</span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end shadow">
                                        <li>
                                            <a class="dropdown-item"
                                                href="{{ url_for('dodaj_wplate', zbiorka_id=z.id) }}">Dodaj
                                                wpłatę</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item"
                                                href="{{ url_for('edytuj_stan', zbiorka_id=z.id) }}">Edytuj stan</a>
                                        </li>
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <li>
                                            <form action="{{ url_for('oznacz_zbiorka', zbiorka_id=z.id) }}"
                                                method="post" class="m-0">
                                                <button type="submit" class="dropdown-item">Oznacz jako
                                                    zrealizowana</button>
                                            </form>
                                        </li>
                                        <li>
                                            <form action="{{ url_for('zmien_widzialnosc', zbiorka_id=z.id) }}"
                                                method="post" class="m-0">
                                                <button type="submit" class="dropdown-item">
                                                    {% if z.ukryta %}Pokaż{% else %}Ukryj{% endif %}
                                                </button>
                                            </form>
                                        </li>
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <li>
                                            <form action="{{ url_for('usun_zbiorka', zbiorka_id=z.id) }}" method="post"
                                                class="m-0"
                                                onsubmit="return confirm('Czy na pewno chcesz usunąć tę zbiórkę?');">
                                                <button type="submit" class="dropdown-item text-danger">Usuń</button>
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <!-- Empty state -->
            <div class="card">
                <div class="card-body text-center py-5">
                    <h5 class="mb-2">Brak aktywnych zbiórek</h5>
                    <p class="text-muted mb-4">Wygląda na to, że teraz nic nie zbieramy.</p>
                    <a href="{{ url_for('dodaj_zbiorka') }}" class="btn btn-primary">Utwórz nową zbiórkę</a>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- PANE: Zrealizowane -->
        <div class="tab-pane fade" id="pane-zrealizowane" role="tabpanel" aria-labelledby="tab-zrealizowane"
            tabindex="0">

            {% if completed_zbiorki and completed_zbiorki|length > 0 %}
            <div class="table-responsive">
                <table class="table table-dark table-striped table-hover align-middle">
                    <thead>
                        <tr>
                            <th style="width:72px;">ID</th>
                            <th>Nazwa</th>
                            <th style="width:180px;">Status</th>
                            <th style="width:1%;">Opcje</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for z in completed_zbiorki %}
                        <tr>
                            <td class="text-muted">{{ z.id }}</td>
                            <td>
                                <div class="d-flex flex-column">
                                    <span class="fw-semibold">{{ z.nazwa }}</span>
                                    {% if z.cel is defined or z.stan is defined %}
                                    <small class="text-muted">
                                        {% if z.cel is defined %} Cel: {{ z.cel|round(2) }} PLN {% endif %}
                                        {% if z.stan is defined %} · Zebrano: {{ z.stan|round(2) }} PLN {% endif %}
                                    </small>
                                    {% endif %}
                                </div>
                            </td>
                            <td>
                                <div class="d-flex align-items-center gap-2 flex-wrap">
                                    <span class="badge rounded-pill"
                                        style="background: var(--accent); color:#111;">Zrealizowana</span>
                                    {% if z.ukryta %}
                                    <span class="badge bg-secondary border"
                                        style="border-color: var(--border);">Ukryta</span>
                                    {% else %}
                                    <span class="badge bg-success">Widoczna</span>
                                    {% endif %}
                                </div>
                            </td>
                            <td class="text-end">
                                <div class="btn-group">
                                    <a href="{{ url_for('edytuj_zbiorka', zbiorka_id=z.id) }}"
                                        class="btn btn-sm btn-outline-light">Edytuj</a>
                                    <button class="btn btn-sm btn-outline-light dropdown-toggle dropdown-toggle-split"
                                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Więcej opcji">
                                        <span class="visually-hidden">Więcej</span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end shadow">
                                        <li>
                                            <a class="dropdown-item"
                                                href="{{ url_for('dodaj_wplate', zbiorka_id=z.id) }}">Dodaj
                                                wpłatę</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item"
                                                href="{{ url_for('edytuj_stan', zbiorka_id=z.id) }}">Edytuj stan</a>
                                        </li>
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <li>
                                            <form action="{{ url_for('zmien_widzialnosc', zbiorka_id=z.id) }}"
                                                method="post" class="m-0">
                                                <button type="submit" class="dropdown-item">
                                                    {% if z.ukryta %}Pokaż{% else %}Ukryj{% endif %}
                                                </button>
                                            </form>
                                        </li>
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <li>
                                            <form action="{{ url_for('usun_zbiorka', zbiorka_id=z.id) }}" method="post"
                                                class="m-0"
                                                onsubmit="return confirm('Czy na pewno chcesz usunąć tę zbiórkę?');">
                                                <button type="submit" class="dropdown-item text-danger">Usuń</button>
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="card">
                <div class="card-body text-center py-5">
                    <h5 class="mb-2">Brak zbiórek zrealizowanych</h5>
                    <p class="text-muted mb-3">Gdy jakaś zbiórka osiągnie 100%, pojawi się tutaj.</p>
                    <a href="{{ url_for('dodaj_zbiorka') }}" class="btn btn-outline-light border">Utwórz nową
                        zbiórkę</a>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}