{% extends 'base.html' %}
{% block title %}Masowa edycja kategorii{% endblock %}
{% block content %}

<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
    <h2 class="mb-2">🗂 Masowa edycja kategorii</h2>
    <div>
        <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
    </div>
</div>

{% include 'admin/_nav.html' %}

<div class="card bg-dark text-white mb-5">
    <div class="card-body">
        <div class="alert alert-warning border-warning text-dark" role="alert">
            ⚠️ <strong>Uwaga!</strong> Przypisanie więcej niż jednej kategorii do listy może zaburzyć poprawne zliczanie
            wydatków.
        </div>

        <form method="post" id="mass-edit-form" data-unsaved-warning="true">
            <div class="card bg-dark text-white mb-4">
                <div class="card-body p-0">
                    <div class="table-responsive admin-table-responsive admin-table-responsive--full">
                        <table class="table table-dark align-middle sortable mb-0">
                            <thead class="position-sticky top-0 bg-dark">
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">Nazwa listy</th>
                                    <th scope="col">Właściciel</th>
                                    <th scope="col">Data</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Podgląd</th>
                                    <th scope="col" style="min-width: 260px;">Kategorie</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for l in lists %}
                                <tr>
                                    <td>{{ l.id }}</td>
                                    <td class="fw-bold align-middle">
                                        <a href="{{ url_for('view_list', list_id=l.id) }}" class="text-white">{{ l.title
                                            }}</a>
                                    </td>
                                    <td>
                                        {% if l.owner %}
                                        👤 {{ l.owner.username }} ({{ l.owner.id }})
                                        {% else %}-{% endif %}
                                    </td>
                                    <td>{{ l.created_at.strftime('%Y-%m-%d %H:%M') if l.created_at else '-' }}</td>
                                    <td>
                                        {% if l.is_archived %}<span
                                            class="badge rounded-pill bg-secondary me-1">Archiwalna</span>{% endif %}
                                        {% if l.is_temporary %}<span
                                            class="badge rounded-pill bg-warning text-dark me-1">Tymczasowa</span>{%
                                        endif %}
                                        {% if l.is_public %}<span class="badge rounded-pill bg-success">Publiczna</span>
                                        {% else %}<span class="badge rounded-pill bg-dark">Prywatna</span>{% endif %}
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-outline-light preview-btn"
                                            data-list-id="{{ l.id }}">
                                            🔍 Zobacz
                                        </button>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <select name="categories_{{ l.id }}" multiple
                                                class="form-select tom-dark bg-dark text-white border-secondary rounded"
                                                data-list-id="{{ l.id }}"
                                                aria-label="Wybierz kategorie dla listy {{ l.id }}">
                                                {% for cat in categories %}
                                                <option value="{{ cat.id }}" {% if cat in l.categories %}selected{%
                                                    endif %}>{{ cat.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}

                                {% if lists|length == 0 %}
                                <tr>
                                    <td colspan="12" class="text-center py-4">Brak list zakupowych do wyświetlenia</td>
                                </tr>
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end mt-3"><button type="submit" class="btn btn-sm btn-outline-light">💾 Zapisz wszystkie zmiany</button></div>
        </form>
    </div>
</div>

<hr>
<div class="d-flex justify-content-between align-items-center mt-4">
    <form method="get" class="d-flex align-items-center">
        <label for="per_page" class="me-2">🔢 Pozycji na stronę:</label>
        <select id="per_page" name="per_page" class="form-select form-select-sm me-2"
            onchange="this.form.page.value = 1; this.form.submit();">
            <option value="25" {% if per_page==25 %}selected{% endif %}>25</option>
            <option value="50" {% if per_page==50 %}selected{% endif %}>50</option>
            <option value="100" {% if per_page==100 %}selected{% endif %}>100</option>
        </select>
        <input type="hidden" name="page" value="{{ page }}">
    </form>

    <nav aria-label="Nawigacja stron">
        <ul class="pagination pagination-dark mb-0">
            <li class="page-item {% if page <= 1 %}disabled{% endif %}">
                <a class="page-link"
                    href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page - 1 }}">«</a>
            </li>
            {% for p in range(1, total_pages + 1) %}
            <li class="page-item {% if p == page %}active{% endif %}">
                <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ p }}">{{ p }}</a>
            </li>
            {% endfor %}
            <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
                <a class="page-link"
                    href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page + 1 }}">»</a>
            </li>
        </ul>
    </nav>
</div>

<!-- Modal podglądu produktów -->
<div class="modal fade" id="productPreviewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content bg-dark text-white">
            <div class="modal-header">
                <h5 class="modal-title" id="previewModalLabel">Podgląd produktów</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Zamknij"></button>
            </div>
            <div class="modal-body">
                <div id="product-list" class="preview-product-list"></div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script src="{{ static_asset_url('static_bp.serve_js', 'preview_list_modal.js') }}?v=3"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'categories_select_admin.js') }}"></script>
{% endblock %}