{% extends "base.html" %}
{% block title %}Reset liczników{% endblock %}

{% block content %}
<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
  <div>
    <h1 class="h3 text-white mb-1">Reset liczników</h1>
    <p class="text-secondary mb-0">Wyzeruj liczniki błędów globalnie lub dla konkretnego adresu IP.</p>
  </div>
</div>

<!-- Reset dla konkretnego IP -->
<div class="card bg-dark border-secondary mb-4">
  <div class="card-header d-flex align-items-center justify-content-between">
    <span>Reset liczników dla IP</span>
  </div>
  <div class="card-body">
    <form method="post" id="reset-ip-form" novalidate>
      <input type="hidden" name="reset_ip">
      <div class="mb-3 col-sm-6 col-md-5 col-lg-4">
        <label for="ip" class="form-label text-primary">Adres IPv4</label>
        <input id="ip" name="ip" class="form-control bg-dark text-white border-secondary" inputmode="numeric"
          autocomplete="off" required placeholder="np. 185.12.34.56" pattern="\\d{1,3}(\\.\\d{1,3}){3}">
        <div class="form-text text-primary"><code>Format: xxx.xxx.xxx.xxx</code></div>
        <div class="invalid-feedback">Podaj poprawny adres IPv4.</div>
      </div>
      <div class="col-12">
        <button type="button" class="btn btn-primary-outline" data-bs-toggle="modal" data-bs-target="#confirmResetIpModal">
          Resetuj liczniki dla IP
        </button>
      </div>
    </form>
  </div>
</div>

<!-- Reset globalny -->
<div class="card bg-dark border-danger mb-4">
  <div class="card-header">Reset wszystkich liczników błędów</div>
  <div class="card-body">
    <form method="post" id="reset-all-form">
      <input type="hidden" name="reset_all_errors">
      <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#confirmResetAllModal">
        Resetuj wszystkie liczniki błędów
      </button>
    </form>
  </div>
</div>

<!-- Modale potwierdzeń -->
<div class="modal fade" id="confirmResetIpModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content bg-dark text-white">
      <div class="modal-header">
        <h5 class="modal-title">Potwierdź reset dla IP</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
      </div>
      <div class="modal-body">
        Czy na pewno zresetować liczniki błędów dla adresu <span class="fw-bold" id="confirm-ip-value">—</span>?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Anuluj</button>
        <button type="submit" form="reset-ip-form" class="btn btn-outline-warning" id="btn-confirm-ip">Tak, resetuj</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="confirmResetAllModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content bg-dark text-white">
      <div class="modal-header">
        <h5 class="modal-title">Potwierdź reset globalny</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
      </div>
      <div class="modal-body">
        Ta operacja wyzeruje <span class="fw-bold">wszystkie</span> liczniki błędów. Kontynuować?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Anuluj</button>
        <button type="submit" form="reset-all-form" class="btn btn-outline-danger" id="btn-confirm-all">Tak, resetuj
          wszystko</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='js/ip_validate.js') }}" defer></script>

{% if message %}
<script>window.addEventListener('DOMContentLoaded', () => window.showToast?.({ text: {{ message| tojson }}, variant: 'success' }));</script>
{% endif %}
{% if error %}
<script>window.addEventListener('DOMContentLoaded', () => window.showToast?.({ text: {{ error| tojson }}, variant: 'danger' }));</script>
{% endif %}

{% endblock %}