{% extends 'base.html' %}
{% block title %}Listy rezerwowe{% 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">
        <div>
            <h2 class="mb-1">Listy rezerwowe</h2>
            <p class="text-muted mb-0">Zarządzaj środkami rezerwowymi i nadpłatami</p>
        </div>
        <div class="d-flex flex-wrap gap-2">
            <a href="{{ url_for('dodaj_rezerwe') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> Dodaj listę
            </a>
            <a href="{{ url_for('admin_dashboard') }}" class="btn btn-outline-light">
                <i class="bi bi-arrow-left"></i> Panel Admina
            </a>
        </div>
    </div>

    <!-- Szybkie statystyki dla rezerw -->
    {% if rezerwy %}
    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="card border-info">
                <div class="card-body text-center">
                    <i class="bi bi-wallet2 fs-1 text-info mb-2"></i>
                    <h3 class="mb-0">{{ rezerwy|length }}</h3>
                    <small class="text-muted">Aktywnych list</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-success">
                <div class="card-body text-center">
                    <i class="bi bi-piggy-bank fs-1 text-success mb-2"></i>
                    <h3 class="mb-0">{{ "%.2f"|format(rezerwy|sum(attribute='stan')) }} zł</h3>
                    <small class="text-muted">Łączna rezerwa</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-warning">
                <div class="card-body text-center">
                    <i class="bi bi-eye fs-1 text-warning mb-2"></i>
                    <h3 class="mb-0">{{ rezerwy|selectattr('ukryta', 'equalto', False)|list|length }}</h3>
                    <small class="text-muted">Widocznych publicznie</small>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
    
    {% if rezerwy %}
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-dark table-striped table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th style="width:72px;">ID</th>
                            <th>Nazwa</th>
                            <th class="text-end" style="width:150px;">Stan</th>
                            <th style="width:140px;">Widoczność</th>
                            <th style="width:1%;">Opcje</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for r in rezerwy %}
                        <tr>
                            <td class="text-muted">{{ r.id }}</td>
                            <td>
                                <div class="d-flex flex-column">
                                    <a href="{{ url_for('zbiorka', zbiorka_id=r.id) }}" class="fw-semibold text-decoration-none">
                                        <i class="bi bi-wallet2"></i> {{ r.nazwa }}
                                    </a>
                                    {% if r.opis %}
                                    <small class="text-muted">
                                        {{ r.opis[:60] }}{% if r.opis|length > 60 %}...{% endif %}
                                    </small>
                                    {% endif %}
                                </div>
                            </td>
                            <td class="text-end">
                                <strong class="text-success">{{ "%.2f"|format(r.stan) }} zł</strong>
                            </td>
                            <td>
                                {% if r.ukryta %}
                                <span class="badge bg-secondary border" style="border-color: var(--border);">
                                    <i class="bi bi-eye-slash"></i> Ukryta
                                </span>
                                {% else %}
                                <span class="badge bg-success">
                                    <i class="bi bi-eye"></i> Widoczna
                                </span>
                                {% endif %}
                            </td>
                            <td class="text-end">
                                <!-- Grupa akcji: główne + rozwijane -->
                                <div class="btn-group">
                                    <a href="{{ url_for('edytuj_rezerwe', rezerwa_id=r.id) }}"
                                        class="btn btn-sm btn-outline-light">
                                        <i class="bi bi-pencil"></i> 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('zbiorka', zbiorka_id=r.id) }}">
                                                <i class="bi bi-eye"></i> Podgląd
                                            </a>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <a class="dropdown-item"
                                                href="{{ url_for('dodaj_wplate', zbiorka_id=r.id) }}">
                                                <i class="bi bi-plus-circle text-success"></i> Dodaj wpłatę
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item"
                                                href="{{ url_for('dodaj_wydatek', zbiorka_id=r.id) }}">
                                                <i class="bi bi-dash-circle text-danger"></i> Dodaj wydatek
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item"
                                                href="{{ url_for('dodaj_przesuniecie', zbiorka_id=r.id) }}">
                                                <i class="bi bi-arrow-left-right text-info"></i> Przesuń środki
                                            </a>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <a class="dropdown-item"
                                                href="{{ url_for('transakcje_zbiorki', zbiorka_id=r.id) }}">
                                                <i class="bi bi-list-ul"></i> Transakcje
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item"
                                                href="{{ url_for('edytuj_stan', zbiorka_id=r.id) }}">
                                                <i class="bi bi-currency-dollar"></i> Edytuj stan
                                            </a>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <form action="{{ url_for('zmien_widzialnosc', zbiorka_id=r.id) }}"
                                                method="post" class="m-0">
                                                <button type="submit" class="dropdown-item">
                                                    {% if r.ukryta %}
                                                        <i class="bi bi-eye"></i> Pokaż
                                                    {% else %}
                                                        <i class="bi bi-eye-slash"></i> Ukryj
                                                    {% endif %}
                                                </button>
                                            </form>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <form action="{{ url_for('usun_rezerwe', rezerwa_id=r.id) }}" method="post"
                                                class="m-0"
                                                onsubmit="return confirm('Czy na pewno usunąć listę \'{{ r.nazwa }}\'?\n\nUWAGA: Zostaną usunięte wszystkie transakcje powiązane z tą listą!');">
                                                <button type="submit" class="dropdown-item text-danger">
                                                    <i class="bi bi-trash"></i> Usuń
                                                </button>
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

    {% else %}
    <!-- Empty state -->
    <div class="card">
        <div class="card-body text-center py-5">
            <i class="bi bi-wallet2 fs-1 text-muted mb-3"></i>
            <h5 class="mb-2">Brak list rezerwowych</h5>
            <p class="text-muted mb-4">
                Nie masz jeszcze żadnych list rezerwowych.<br>
                Utwórz pierwszą, aby zarządzać nadpłatami i środkami rezerwowymi.
            </p>
            <a href="{{ url_for('dodaj_rezerwe') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> Dodaj listę rezerwową
            </a>
        </div>
    </div>
    {% endif %}
</div>

{% endblock %}