{% extends "base.html" %}
{% block title %}Ustawienia - RouterOS Update{% endblock %}

{% block extra_head %}
<style>
/* Karta w trybie ciemnym */
body.dark-mode .card {
  background-color: #1e1e1e;
  color: #ccc;
  border-color: #444;
}

/* Nagłówek karty w trybie ciemnym */
body.dark-mode .card .card-header.bg-light {
  background-color: #333 !important;
  border-bottom: 1px solid #444;
}
</style>
{% endblock %}

{% block content %}
<div class="container">
  
  <!-- Karta z głównym formularzem ustawień -->
  <div class="card border-0 shadow mb-4">
    <div class="card-header bg-light">
      <h4 class="mb-0">Ustawienia powiadomień i systemu</h4>
    </div>
    <div class="card-body">
      <form method="POST">
        
        <!-- Sekcja Pushover -->
        <fieldset class="border p-3 mb-3">
          <legend class="w-auto">Pushover</legend>
          <div class="form-check mb-2">
            <input type="checkbox" class="form-check-input" name="pushover_enabled" id="pushover_enabled"
                   {% if settings.pushover_enabled %}checked{% endif %}>
            <label class="form-check-label" for="pushover_enabled">
              Włącz powiadomienia Pushover
            </label>
          </div>
          <div class="mb-3">
            <label for="pushover_user_key" class="form-label">Pushover User Key</label>
            <input type="text" class="form-control" name="pushover_user_key" id="pushover_user_key"
                   value="{{ settings.pushover_user_key or '' }}"
                   placeholder="np. ujHGkDYop837...">
          </div>
          <div class="mb-3">
            <label for="pushover_token" class="form-label">Pushover Token</label>
            <input type="text" class="form-control" name="pushover_token" id="pushover_token"
                   value="{{ settings.pushover_token or '' }}"
                   placeholder="np. a9WsK09mnj3R8aGj...">
          </div>
        </fieldset>
        
        <!-- Sekcja SMTP (E-mail) -->
        <fieldset class="border p-3 mb-3">
          <legend class="w-auto">SMTP (E-mail)</legend>
          <div class="form-check mb-2">
            <input type="checkbox" class="form-check-input" name="email_notifications_enabled"
                   id="email_notifications_enabled"
                   {% if settings.email_notifications_enabled %}checked{% endif %}>
            <label class="form-check-label" for="email_notifications_enabled">
              Włącz powiadomienia e-mail
            </label>
          </div>
          <div class="mb-3">
            <label for="smtp_server" class="form-label">SMTP Server</label>
            <input type="text" class="form-control" name="smtp_server" id="smtp_server"
                   value="{{ settings.smtp_server or '' }}"
                   placeholder="np. smtp.gmail.com">
          </div>
          <div class="mb-3">
            <label for="smtp_port" class="form-label">SMTP Port</label>
            <input type="number" class="form-control" name="smtp_port" id="smtp_port"
                   value="{{ settings.smtp_port or '' }}"
                   placeholder="np. 587">
          </div>
          <div class="mb-3">
            <label for="smtp_username" class="form-label">SMTP Username</label>
            <input type="text" class="form-control" name="smtp_username" id="smtp_username"
                   value="{{ settings.smtp_username or '' }}">
          </div>
          <div class="mb-3">
            <label for="smtp_password" class="form-label">SMTP Password</label>
            <input type="password" class="form-control" name="smtp_password" id="smtp_password"
                   value="{{ settings.smtp_password or '' }}">
          </div>
        </fieldset>

        <!-- Sekcja E-mail odbiorcy -->
        <fieldset class="border p-3 mb-3">
          <legend class="w-auto">Odbiorca powiadomień</legend>
          <div class="mb-3">
            <label for="recipient_email" class="form-label">Adres e-mail do otrzymywania powiadomień</label>
            <input type="email" class="form-control" name="recipient_email" id="recipient_email"
                   value="{{ settings.recipient_email or '' }}"
                   placeholder="np. admin@example.com">
          </div>
        </fieldset>

        <!-- Sekcja interwału -->
        <fieldset class="border p-3 mb-3">
          <legend class="w-auto">Interwał sprawdzania</legend>
          <div class="mb-3">
            <label for="check_interval" class="form-label">
              Interwał (sekundy) 
              <code>21600 = 6 godzin</code>
            </label>
            <input type="number" class="form-control" name="check_interval" id="check_interval"
                   value="{{ settings.check_interval or 21600 }}">
            <small class="text-muted">Co ile sekund system będzie sprawdzał aktualizacje.</small>
          </div>
          <div class="mb-3">
            <label for="time_input" class="form-label">Czas (HH:MM:SS)</label>
            <input type="text" class="form-control" id="time_input" placeholder="np. 01:30:00">
            <button type="button" class="btn btn-secondary mt-2" onclick="convertTime()">
              Konwertuj na sekundy
            </button>
            <small class="text-muted d-block mt-1">
              Wpisz czas w formacie Godziny:Minuty:Sekundy, a następnie kliknij „Konwertuj”.
            </small>
          </div>
        </fieldset>

        <!-- Sekcja retencji logów -->
        <fieldset class="border p-3 mb-3">
          <legend class="w-auto">Retencja logów</legend>
          <div class="mb-3">
            <label for="log_retention_days" class="form-label">
              Przechowywać logi przez (dni)
            </label>
            <input type="number" class="form-control" name="log_retention_days" id="log_retention_days"
                   value="{{ settings.log_retention_days or 30 }}">
            <small class="text-muted">Starsze logi będą automatycznie usuwane po tym czasie.</small>
          </div>
        </fieldset>

        <!-- Przycisk zapisywania -->
        <button type="submit" class="btn btn-primary">Zapisz ustawienia</button>
      </form>
    </div>
  </div>

  <!-- Karta z przyciskami testowymi -->
  <div class="card border-0 shadow">
    <div class="card-header bg-light">
      <h5 class="mb-0">Test powiadomień</h5>
    </div>
    <div class="card-body">
      <p class="text-muted">Skorzystaj z przycisków, aby wysłać testowe powiadomienie Pushover / E-mail.</p>
      <div class="d-flex justify-content-end">
        <form method="POST" action="{{ url_for('test_pushover') }}" class="me-2">
          <button type="submit" class="btn btn-secondary">Test Pushover</button>
        </form>
        <form method="POST" action="{{ url_for('test_email') }}">
          <button type="submit" class="btn btn-secondary">Test E-mail</button>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
function convertTime() {
  var timeStr = document.getElementById("time_input").value;
  var parts = timeStr.split(':');
  if (parts.length !== 3) {
    alert("Podaj czas w formacie HH:MM:SS");
    return;
  }
  var seconds = parseInt(parts[0]) * 3600 + parseInt(parts[1]) * 60 + parseInt(parts[2]);
  document.getElementById("check_interval").value = seconds;
}
</script>
{% endblock %}