{% extends 'base.html' %}
{% block title %}Produkty i sugestie{% endblock %}
{% block content %}

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

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

<div class="card bg-secondary bg-opacity-10 text-white mb-4">
  <div class="card-body">

    <!-- Formularz dodawania sugestii -->
    <form action="{{ url_for('add_suggestion') }}" method="POST" class="mb-4">
      <label class="form-label fw-bold mb-2">➕ Dodaj nową sugestię:</label>
      <div class="input-group">
        <input type="text" name="suggestion_name" class="form-control bg-dark text-white border-secondary"
          placeholder="Nowa sugestia produktu…" required>
        <button type="submit" class="btn btn-outline-light">➕ Dodaj</button>
      </div>
    </form>

    <hr class="border-secondary opacity-50 mb-4 mt-2">

    <!-- Szukajka z przyciskiem wyczyść -->
    <label for="search-table" class="form-label fw-bold mb-2">🔍 Przeszukaj tabelę produktów i sugestii:</label>
    <div class="input-group">
      <input type="text" id="search-table" class="form-control bg-dark text-white border-secondary"
        placeholder="Wpisz frazę, np. 'mleko'">
      <button type="button" id="clear-search" class="btn btn-outline-light">🧹 Wyczyść</button>
    </div>

  </div>
</div>

<div class="card bg-dark text-white mb-5">
  <div class="card-body">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h4 class="m-0">📦 Produkty (z synchronizacją sugestii o unikalnych nazwach)</h4>
      <span class="badge rounded-pill bg-info">{{ total_items }} produktów</span>
    </div>
    <div class="card-body p-0">
      <table class="table table-dark align-middle sortable keep-horizontal">
        <thead>
          <tr>
            <th>ID</th>
            <th>Nazwa</th>
            <th>Dodany przez</th>
            <th>Ilość użyć</th>
            <th>Akcja</th>
          </tr>
        </thead>
        <tbody>
          {% for item in items %}
          <tr>
            <td>{{ item.id }}</td>
            <td class="fw-bold"><span class="badge rounded-pill bg-primary">{{ item.name }}</span></td>
            <td>
              {% if item.added_by and users_dict.get(item.added_by) %}
              👤 {{ users_dict[item.added_by] }} ({{ item.added_by }})
              {% else %}
              -
              {% endif %}
            </td>
            <td><span class="badge rounded-pill bg-secondary">{{ usage_counts.get(item.name.lower(), 0) }}</span></td>
            <td>
              {% set clean_name = item.name | replace('\xa0', ' ') | trim | lower %}
              {% set suggestion = suggestions_dict.get(clean_name) %}
              {% if suggestion %}
              ✅ Istnieje (ID: {{ suggestion.id }})
              <button class="btn btn-sm btn-outline-light ms-1 delete-suggestion-btn"
                data-suggestion-id="{{ suggestion.id }}">🗑️ Usuń</button>
              {% else %}
              <button class="btn btn-sm btn-outline-light sync-btn" data-item-id="{{ item.id }}">🔄
                Synchronizuj</button>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
          {% if items|length == 0 %}
          <tr>
            <td colspan="12" class="text-center py-4">
              Pusta lista produktów
            </td>
          </tr>
          {% endif %}

        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="card bg-dark text-white mb-5">
  <div class="card-body">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h4 class="m-0">💡 Wszystkie sugestie (poza powiązanymi)</h4>
      <span class="badge rounded-pill bg-info">{{ orphan_suggestions|length }} sugestii</span>
    </div>
    <div class="card-body p-0">
      {% set item_names = items | map(attribute='name') | map('lower') | list %}
      <table class="table table-dark align-middle sortable keep-horizontal">
        <thead>
          <tr>
            <th>ID</th>
            <th>Nazwa</th>
            <th>Akcje</th>
          </tr>
        </thead>
        <tbody>
          {% for suggestion in orphan_suggestions %}
          {% if suggestion.name.lower() not in item_names %}
          <tr>
            <td>{{ suggestion.id }}</td>
            <td class="fw-bold"><span class="badge rounded-pill bg-primary">{{ suggestion.name }}</span></td>
            <td>
              <button class="btn btn-sm btn-outline-light delete-suggestion-btn"
                data-suggestion-id="{{ suggestion.id }}">🗑️ Usuń</button>
            </td>
          </tr>
          {% endif %}
          {% endfor %}
          {% if orphan_suggestions|length == 0 %}
          <tr>
            <td colspan="12" class="text-center py-4">
              Brak niepowiązanych sugestii do wyświetlenia
            </td>
          </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </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="100" {% if per_page==25 %}selected{% endif %}>100</option>
      <option value="200" {% if per_page==50 %}selected{% endif %}>200</option>
      <option value="300" {% if per_page==100 %}selected{% endif %}>300</option>
      <option value="500" {% if per_page==500 %}selected{% endif %}>500</option>
      <option value="750" {% if per_page==750 %}selected{% endif %}>750</option>
      <option value="1000" {% if per_page==1000 %}selected{% endif %}>1000</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>

{% block scripts %}
<script src="{{ static_asset_url('static_bp.serve_js', 'product_suggestion.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'table_search.js') }}"></script>
{% endblock %}

{% endblock %}