{% extends 'base.html' %}
{% block title %}Edytuj listę{% endblock %}
{% block content %}

<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
  <h2 class="mb-2">{{ ui_icon('tool') }} Edytuj listę #{{ list.id }}</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-5">
  <div class="card-body">
    <h4 class="card-title">{{ ui_icon('file-text') }} Podstawowe informacje</h4>
    <form method="post" class="mt-3" data-unsaved-warning="true">
      <input type="hidden" name="action" value="save">

      <!-- Nazwa listy -->
      <div class="mb-3">
        <label for="title" class="form-label">{{ ui_icon('notes') }} Nazwa listy</label>
        <input type="text" class="form-control bg-dark text-white border-secondary ui-consistent-input" id="title" name="title"
          value="{{ list.title }}" required>
      </div>

      <!-- Wydatek i właściciel -->
      <div class="row mb-3">
        <div class="col-md-6">
          <label for="amount" class="form-label">{{ ui_icon('coins') }} Całkowity wydatek ({{ CURRENCY_CODE }})</label>
          <input type="number" step="0.01" min="0" class="form-control bg-dark text-white border-secondary ui-consistent-input"
            id="amount" name="amount" value="{{ '%.2f'|format(total_expense) }}">
        </div>

        <div class="col-md-6">
          <label for="owner_id" class="form-label">{{ ui_icon('user') }} Właściciel</label>
          <select class="form-select bg-dark text-white border-secondary ui-consistent-input" id="owner_id" name="owner_id">
            {% for user in users %}
            <option value="{{ user.id }}" {% if list.owner_id==user.id %}selected{% endif %}>
              {{ user.username }}
            </option>
            {% endfor %}
          </select>
        </div>
      </div>

      <!-- Statusy -->
      <div class="mb-4">
        <label class="form-label">{{ ui_icon('settings') }} Statusy listy</label>
        <div class="switch-grid">
          <div class="form-check form-switch app-switch">
            <input class="form-check-input" type="checkbox" id="archived" name="archived" {% if list.is_archived
              %}checked{% endif %}>
            <label class="form-check-label" for="archived">{{ ui_icon('box') }} Archiwalna</label>
          </div>

          <div class="form-check form-switch app-switch">
            <input class="form-check-input" type="checkbox" id="public" name="public" {% if list.is_public %}checked{%
              endif %}>
            <label class="form-check-label" for="public">{{ ui_icon('world') }} Publiczna</label>
          </div>

          <div class="form-check form-switch app-switch">
            <input class="form-check-input" type="checkbox" id="temporary" name="temporary" {% if list.is_temporary
              %}checked{% endif %}>
            <label class="form-check-label" for="temporary">{{ ui_icon('hourglass') }} Tymczasowa (podaj date i godzine wygasania)</label>
          </div>
        </div>
      </div>


      <!-- Data/godzina wygaśnięcia -->
      <div class="row mb-4">
        <div class="col-md-6">
          <label for="expires_date" class="form-label">{{ ui_icon('calendar') }} Data wygaśnięcia</label>
          <input type="date" class="form-control bg-dark text-white border-secondary ui-consistent-input" id="expires_date"
            name="expires_date" value="{{ list.expires_at.strftime('%Y-%m-%d') if list.expires_at else '' }}">
        </div>
        <div class="col-md-6">
          <label for="expires_time" class="form-label">{{ ui_icon('clock') }} Godzina wygaśnięcia</label>
          <input type="time" class="form-control bg-dark text-white border-secondary ui-consistent-input" id="expires_time"
            name="expires_time" value="{{ list.expires_at.strftime('%H:%M') if list.expires_at else '' }}">
        </div>
      </div>

      <!-- Utworzono / Zmień miesiąc -->
      <div class="row mb-4">
        <div class="col-md-6">
          <label class="form-label">{{ ui_icon('calendar') }} Utworzono</label>
          <div>
            <span class="badge rounded-pill bg-success rounded-pill text-dark ms-1">
              {{ list.created_at.strftime('%Y-%m-%d') }}
            </span>
          </div>
        </div>
        <div class="col-md-6">
          <label class="form-label">{{ ui_icon('folder') }} Przenieś do miesiąca (format: rok-miesiąc np 2026-01)</label>
          <input type="month" id="created_month" name="created_month"
            class="form-control bg-dark text-white border-secondary ui-consistent-input">
        </div>
      </div>

      <!-- Kategorie -->
      <div class="mb-4">
        <label for="categories" class="form-label">{{ ui_icon('tag') }} Kategorie</label>
        <select id="categories" name="categories"
          class="form-select tom-dark bg-dark text-white border-secondary ui-consistent-input">
          <option value="">– brak –</option>
          {% for cat in categories %}
          <option value="{{ cat.id }}" {% if cat.id in selected_categories %}selected{% endif %}>
            {{ cat.name }}
          </option>
          {% endfor %}
        </select>
      </div>

      <!-- Link udostępnienia -->
      <div class="mb-4">
        <label class="form-label">{{ ui_icon('link') }} Link do udostępnienia</label>
        <input type="text" class="form-control bg-dark text-white border-secondary ui-consistent-input" readonly
          value="{{ request.url_root }}share/{{ list.share_token }}">
      </div>


      <!-- Dostęp / uprawnienia -->
      <div class="mb-4 border-top pt-3 mt-4">
        <h5 class="mb-3">{{ ui_icon('shield-lock') }} Użytkownicy z dostępem</h5>

        <a class="btn btn-outline-warning btn-sm mb-3" href="{{ url_for('admin_lists_access', list_id=list.id) }}">
          {{ ui_icon('settings') }} Edytuj uprawnienia
        </a>

        {% if permitted_users %}
        <ul class="list-group list-group-flush mb-3">
          {% for u in permitted_users %}
          <li
            class="list-group-item bg-dark text-white d-flex justify-content-between align-items-center border-secondary">
            <div>
              <span class="fw-semibold">@{{ u.username }}</span>
            </div>
          </li>
          {% endfor %}
        </ul>
        {% else %}
        <div class="text-warning small">Brak dodatkowych uprawnień.</div>
        {% endif %}
      </div>

      <button type="submit" class="btn btn-outline-light btn-sm me-2">{{ ui_icon('device-floppy') }} Zapisz zmiany</button>
    </form>

  </div>
</div>

<div class="card bg-dark text-white mb-5">
  <div class="card-body">
    <h4 class="card-title">{{ ui_icon('notes') }} Produkty</h4>

    <form method="post" class="row g-2 mb-3">
      <input type="hidden" name="action" value="add_item">
      <div class="col-md-8">
        <input type="text" class="form-control bg-dark text-white border-secondary ui-consistent-input" name="item_name"
          placeholder="Nazwa produktu" required>
      </div>
      <div class="col-md-1">
        <input type="number" class="form-control bg-dark text-white border-secondary ui-consistent-input" name="quantity" min="1"
          value="1">
      </div>
      <div class="col-md-3 d-grid">
        <button type="submit" class="btn btn-outline-light">{{ ui_icon('plus') }} Dodaj</button>
      </div>
    </form>

    <div class="table-responsive">
      <table class="table table-dark table-bordered align-middle">
        <thead>
          <tr>
            <th>Nazwa produktu</th>
            <th>Notatka</th>
            <th>Ilość</th>
            <th>Aktualny stan</th>
            <th>Akcja</th>
            <th>Usuń</th>
          </tr>
        </thead>
        <tbody>
          {% for item in items %}
          <tr>
            <td>
              <strong>{{ item.name }}</strong>
            </td>
            <td>
              {% if item.note %}
              <div class="text-info small mt-1"><strong>Notatka:</strong> {{ item.note }}</div>
              {% endif %}
              {% if item.not_purchased_reason %}
              <div class="text-warning small mt-1"><strong>Powód:</strong> {{ item.not_purchased_reason }}</div>
              {% endif %}
            </td>
            <td>
              <form method="post" action="{{ url_for('edit_list', list_id=list.id) }}">
                <input type="hidden" name="action" value="edit_quantity">
                <input type="hidden" name="item_id" value="{{ item.id }}">
                <div class="input-group input-group-sm w-auto">
                  <input type="number" name="quantity" class="form-control bg-dark text-white border-secondary" min="1"
                    value="{{ item.quantity }}">
                  <button type="submit" class="btn btn-outline-light btn-sm" aria-label="Zapisz ilość" title="Zapisz ilość">{{ ui_icon('device-floppy') }}</button>
                </div>
              </form>
            </td>
            <td>
              {% if item.purchased %}
              <span class="badge bg-success">{{ ui_icon('check') }} Kupiony</span>
              {% elif item.not_purchased %}
              <span class="badge bg-warning text-dark">{{ ui_icon('alert-triangle') }} Nie kupiony</span>
              {% else %}
              <span class="badge bg-secondary">Nieoznaczony</span>
              {% endif %}
            </td>
            <td>
              <form method="post" action="{{ url_for('edit_list', list_id=list.id) }}">
                <input type="hidden" name="item_id" value="{{ item.id }}">
                <div class="btn-group btn-group-sm d-flex gap-1">
                  {% if not item.not_purchased %}
                  <button type="submit" name="action" value="toggle_purchased" class="btn btn-outline-light btn-sm">
                    {% if item.purchased %}{{ ui_icon('ban') }} Odznacz{% else %}{{ ui_icon('check') }} Kupiony{% endif %}
                  </button>
                  <button type="submit" name="action" value="mark_not_purchased" class="btn btn-outline-light btn-sm">{{ ui_icon('alert-triangle') }}
                    Nie kupiony</button>
                  {% endif %}
                  {% if item.not_purchased %}
                  <button type="submit" name="action" value="unmark_not_purchased"
                    class="btn btn-outline-light btn-sm">{{ ui_icon('check') }}
                    Przywróć jako nieoznaczone</button>
                  {% endif %}
                </div>
              </form>
            </td>
            <td>
              <form method="post" action="{{ url_for('edit_list', list_id=list.id) }}">
                <input type="hidden" name="action" value="delete_item">
                <input type="hidden" name="item_id" value="{{ item.id }}">
                <button type="submit" class="btn btn-outline-light btn-sm" aria-label="Usuń produkt" title="Usuń produkt">{{ ui_icon('trash') }}</button>
              </form>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="5" class="text-center text-muted">Brak produktów.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="card bg-dark text-white mb-5">
  <div class="card-body">
    <h4 class="card-title">{{ ui_icon('receipt') }} Paragony</h4>

    <div class="mb-3 text-end">
      <a href="{{ url_for('admin_receipts', id=list.id) }}" class="btn btn-sm btn-outline-light">
        {{ ui_icon('folder') }} Otwórz zarządzanie paragonami
      </a>
    </div>

    <div class="row g-3">
      {% for r in receipts %}
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card bg-dark text-white h-100 shadow-sm border border-secondary">
          <a href="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}" class="glightbox"
            data-gallery="receipts" data-title="{{ r.filename }}">
            <img src="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}"
              class="card-img-top" style="object-fit: cover; height: 200px;" title="{{ r.filename }}">
          </a>

          <div class="card-body text-center p-2 small">
            <div class="text-truncate fw-semibold" title="{{ r.filename }}">{{ ui_icon('file-text') }} {{ r.filename }}</div>
            <div>{{ ui_icon('calendar') }} {{ r.uploaded_at.strftime('%Y-%m-%d %H:%M') }}</div>
            <div>{{ ui_icon('user') }} {{ r.uploaded_by_user.username if r.uploaded_by_user else "?" }}</div>
            <div>
              {{ ui_icon('device-floppy') }}
              {% if r.filesize and r.filesize >= 1024 * 1024 %}
              {{ (r.filesize / 1024 / 1024) | round(2) }} MB
              {% elif r.filesize %}
              {{ (r.filesize / 1024) | round(1) }} kB
              {% else %}
              Brak danych
              {% endif %}
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

    {% if not receipts %}
    <div class="alert alert-info text-center mt-3" role="alert">
      {{ ui_icon('info-circle') }} Brak paragonów
    </div>
    {% endif %}
  </div>
</div>

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