{% extends "base.html" %}
{% block title %}Dashboard - SSL Monitor{% endblock %}
{% block content %}
<h2 class="mb-4 text-center">Dashboard</h2>

<!-- Przyciski akcji na górze -->
<div class="mb-4 text-center">
  <button class="btn btn-success me-2" onclick="showAddServiceModal()">Dodaj Serwis</button>
  <button class="btn btn-primary me-2" onclick="bulkUpdate()">Bulk Update</button>
</div>

<!-- Opcje grupowania -->
<div class="mb-4 d-flex justify-content-center">
    <div style="max-width:300px;">
      <label for="groupingCriteria" class="form-label">Grupuj usługi:</label>
      <select id="groupingCriteria" class="form-select">
        <option value="none" {% if default_grouping == 'none' %}selected{% endif %}>Brak grupowania</option>
        <option value="protocol" {% if default_grouping == 'protocol' %}selected{% endif %}>Grupuj według protokołu</option>
        <option value="host" {% if default_grouping == 'host' %}selected{% endif %}>Grupuj według hosta</option>
        <option value="region" {% if default_grouping == 'region' %}selected{% endif %}>Grupuj według regionu</option>
      </select>
    </div>
  </div>  

<div id="cardsContainer" class="row">
  {% for s in services %}
    {% set card_class = "" %}
    {% if s.status == "Expired" %}
      {% set card_class = "bg-danger text-white" %}
    {% elif s.status == "ExpiringSoon" %}
      {% set card_class = "bg-warning text-dark" %}
    {% elif s.status == "OK" %}
      {% set card_class = "bg-success text-white" %}
    {% elif s.status == "Error" %}
      {% set card_class = "bg-secondary text-white" %}
    {% else %}
      {% set card_class = "bg-light" %}
    {% endif %}
    <div class="col-md-4 mb-4 service-card" data-protocol="{{ s.protocol|lower|trim }}" data-host="{{ s.host }}" data-region="{{ s.region }}">

      <div class="card {{ card_class }} shadow-sm rounded">
        <div class="card-body">
          <h5 class="card-title">{{ s.host }}:{{ s.port }} ({{ s.protocol }})</h5>
          <p class="card-text">
            Status: <strong>{{ s.status }}</strong><br>
            Last Check: {{ s.last_check if s.last_check else '---' }}<br>
            Expiry: {{ s.expiry_date if s.expiry_date else '---' }}
          </p>
          <div class="d-flex justify-content-center gap-2 flex-wrap">
            <button class="btn btn-sm btn-light" onclick="showEditServiceModal({{ s.id }})">Edytuj</button>
            <button class="btn btn-sm btn-info" onclick="updateService({{ s.id }})">Aktualizuj</button>
            <button class="btn btn-sm btn-danger" onclick="deleteService({{ s.id }})">Usuń</button>
            {% if s.protocol|lower == 'https' %}
              <button class="btn btn-sm btn-secondary" onclick="showCertDetails({{ s.id }})">Szczegóły certyfikatu</button>
              <button class="btn btn-sm btn-secondary" onclick="showCertChain({{ s.id }})">Łańcuch certyfikatów</button>
            {% else %}
              <button class="btn btn-sm btn-secondary" onclick="showResponse({{ s.id }})">Odpowiedź serwera</button>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  {% endfor %}
</div>

<!-- Modale -->
<!-- Modal dodawania serwisu -->
<div class="modal" tabindex="-1" id="addServiceModal">
    <div class="modal-dialog">
      <div class="modal-content bg-dark text-white">
        <div class="modal-header">
          <h5 class="modal-title">Dodaj nowy serwis</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close" onclick="hideAddServiceModal()"></button>
        </div>
        <div class="modal-body">
          <form id="addServiceForm">
            <div class="mb-3">
              <label for="host" class="form-label">Host</label>
              <input type="text" class="form-control" id="host" name="host" required>
            </div>
            <div class="mb-3">
              <label for="protocol" class="form-label">Protocol</label>
              <select class="form-select" id="protocol" name="protocol">
                <option value="https">HTTPS (443)</option>
                <option value="smtp_starttls">SMTP STARTTLS (587)</option>
                <option value="smtp_ssl">SMTP SSL (465)</option>
                <option value="imap_starttls">IMAP STARTTLS (143)</option>
                <option value="imap_ssl">IMAP SSL (993)</option>
              </select>
            </div>
            <div class="mb-3">
              <label for="port" class="form-label">Port</label>
              <input type="number" class="form-control" id="port" name="port" value="443">
            </div>
            <!-- Nowe pole dla regionu -->
            <div class="mb-3">
              <label for="region" class="form-label">Region</label>
              <input type="text" class="form-control" id="region" name="region">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" onclick="hideAddServiceModal()">Anuluj</button>
          <button class="btn btn-primary" onclick="addService()">Dodaj</button>
        </div>
      </div>
    </div>
  </div>  

<!-- Modal edycji serwisu -->
<!-- Modal edycji serwisu -->
<div class="modal" tabindex="-1" id="editServiceModal">
    <div class="modal-dialog">
      <div class="modal-content bg-dark text-white">
        <div class="modal-header">
          <h5 class="modal-title">Edytuj serwis</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close" onclick="hideEditServiceModal()"></button>
        </div>
        <div class="modal-body">
          <form id="editServiceForm">
            <input type="hidden" id="editServiceId">
            <div class="mb-3">
              <label for="editHost" class="form-label">Host</label>
              <input type="text" class="form-control" id="editHost" name="host" required>
            </div>
            <div class="mb-3">
              <label for="editProtocol" class="form-label">Protocol</label>
              <select class="form-select" id="editProtocol" name="protocol">
                <option value="https">HTTPS (443)</option>
                <option value="smtp_starttls">SMTP STARTTLS (587)</option>
                <option value="smtp_ssl">SMTP SSL (465)</option>
                <option value="imap_starttls">IMAP STARTTLS (143)</option>
                <option value="imap_ssl">IMAP SSL (993)</option>
              </select>
            </div>
            <!-- Nowe pole dla regionu -->
            <div class="mb-3">
              <label for="editRegion" class="form-label">Region</label>
              <input type="text" class="form-control" id="editRegion" name="region">
            </div>
            <div class="mb-3">
              <label for="editPort" class="form-label">Port</label>
              <input type="number" class="form-control" id="editPort" name="port" value="443">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" onclick="hideEditServiceModal()">Anuluj</button>
          <button class="btn btn-primary" onclick="editService()">Zapisz zmiany</button>
        </div>
      </div>
    </div>
  </div>  

<!-- Modal wyświetlania certyfikatu / łańcucha certyfikatów (dla HTTPS) -->
<div class="modal" tabindex="-1" id="certDetailsModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content bg-dark text-white">
      <div class="modal-header">
        <h5 class="modal-title">Szczegóły certyfikatu / Łańcuch certyfikatów</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close" onclick="hideCertDetailsModal()"></button>
      </div>
      <div class="modal-body">
        <div id="certDetails"></div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" onclick="hideCertDetailsModal()">Zamknij</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal wyświetlania odpowiedzi serwera (dla nie-HTTPS) -->
<div class="modal" tabindex="-1" id="responseModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content bg-dark text-white">
      <div class="modal-header">
        <h5 class="modal-title">Odpowiedź serwera</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close" onclick="hideResponseModal()"></button>
      </div>
      <div class="modal-body">
        <pre id="serverResponse" style="white-space: pre-wrap;"></pre>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" onclick="hideResponseModal()">Zamknij</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}
{% block extra_js %}
  {{ super() }}
  <script>
    let addServiceModal = null;
    let editServiceModal = null;
    let certDetailsModal = null;
    let responseModal = null;
    document.addEventListener("DOMContentLoaded", function() {
      addServiceModal = new bootstrap.Modal(document.getElementById('addServiceModal'), {});
      editServiceModal = new bootstrap.Modal(document.getElementById('editServiceModal'), {});
      certDetailsModal = new bootstrap.Modal(document.getElementById('certDetailsModal'), {});
      responseModal = new bootstrap.Modal(document.getElementById('responseModal'), {});
      
      // Aktualizacja domyślnej wartości portu w formularzu dodawania
      document.getElementById('protocol').addEventListener('change', function() {
        let portField = document.getElementById('port');
        switch(this.value) {
          case 'https': portField.value = 443; break;
          case 'smtp_starttls': portField.value = 587; break;
          case 'smtp_ssl': portField.value = 465; break;
          case 'imap_starttls': portField.value = 143; break;
          case 'imap_ssl': portField.value = 993; break;
          default: portField.value = 443;
        }
      });
      
      // Aktualizacja domyślnej wartości portu w formularzu edycji
      document.getElementById('editProtocol').addEventListener('change', function() {
        let portField = document.getElementById('editPort');
        switch(this.value) {
          case 'https': portField.value = 443; break;
          case 'smtp_starttls': portField.value = 587; break;
          case 'smtp_ssl': portField.value = 465; break;
          case 'imap_starttls': portField.value = 143; break;
          case 'imap_ssl': portField.value = 993; break;
          default: portField.value = 443;
        }
      });
      
      // Grupowanie kart przy zmianie kryterium
      document.getElementById('groupingCriteria').addEventListener('change', function() {
        groupCards(this.value);
      });
      groupCards(document.getElementById('groupingCriteria').value);
    });
    
    function showAlert(message, type) {
      const alertContainer = document.getElementById('alert-container');
      const alertDiv = document.createElement('div');
      alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
      alertDiv.setAttribute('role', 'alert');
      alertDiv.innerHTML = message +
        '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Zamknij"></button>';
      alertContainer.appendChild(alertDiv);
      setTimeout(function(){
        alertDiv.classList.remove('show');
        alertDiv.remove();
      }, 3000);
    }
    
    function groupCards(criteria) {
      const container = document.getElementById('cardsContainer');
      const cards = Array.from(container.getElementsByClassName('service-card'));
      container.innerHTML = "";
      
      if (criteria === "none") {
        cards.forEach(card => container.appendChild(card));
      } else {
        const groups = {};
        cards.forEach(card => {
          const key = card.getAttribute("data-" + criteria);
          if (!groups[key]) {
            groups[key] = [];
          }
          groups[key].push(card);
        });
        for (let group in groups) {
          const header = document.createElement("h4");
          header.className = "mt-4";
          header.innerText = criteria === "protocol" ? group.toUpperCase() : group;
          container.appendChild(header);
          const rowDiv = document.createElement("div");
          rowDiv.className = "row";
          groups[group].forEach(card => rowDiv.appendChild(card));
          container.appendChild(rowDiv);
        }
      }
    }
    
    function showAddServiceModal() { addServiceModal.show(); }
    function hideAddServiceModal() { addServiceModal.hide(); }
    
    function showEditServiceModal(serviceId) {
    fetch("{{ url_for('api_get_services') }}")
        .then(r => r.json())
        .then(services => {
        const svc = services.find(s => s.id === serviceId);
        if (svc) {
            document.getElementById("editServiceId").value = svc.id;
            document.getElementById("editHost").value = svc.host;
            document.getElementById("editPort").value = svc.port;
            document.getElementById("editProtocol").value = svc.protocol;
            document.getElementById("editRegion").value = svc.region ? svc.region : "default";
            editServiceModal.show();
        }
        })
        .catch(err => console.error(err));
    }
    
    function showCertDetails(serviceId) {
      fetch(`{{ url_for('api_cert_details', service_id=0) }}`.replace("0", serviceId))
        .then(r => r.json())
        .then(data => {
          let htmlContent = "";
          if (data.error) {
            htmlContent = `<p class="text-danger">Błąd: ${data.error}</p>`;
          } else {
            htmlContent = data.html;
          }
          document.getElementById("certDetails").innerHTML = htmlContent;
          certDetailsModal.show();
        })
        .catch(err => {
          console.error(err);
          document.getElementById("certDetails").innerHTML = `<p class="text-danger">Błąd przy pobieraniu szczegółów certyfikatu.</p>`;
          certDetailsModal.show();
        });
    }
    
    function showCertChain(serviceId) {
      fetch(`{{ url_for('api_cert_chain', service_id=0) }}`.replace("0", serviceId))
        .then(r => r.json())
        .then(data => {
          let htmlContent = "";
          if (data.error) {
            htmlContent = `<p class="text-danger">Błąd: ${data.error}</p>`;
          } else {
            htmlContent = data.html;
          }
          document.getElementById("certDetails").innerHTML = htmlContent;
          certDetailsModal.show();
        })
        .catch(err => {
          console.error(err);
          document.getElementById("certDetails").innerHTML = `<p class="text-danger">Błąd przy pobieraniu łańcucha certyfikatów.</p>`;
          certDetailsModal.show();
        });
    }
    
    function showResponse(serviceId) {
      fetch(`{{ url_for('api_service_response', service_id=0) }}`.replace("0", serviceId))
        .then(r => r.json())
        .then(data => {
          let responseText = "";
          if (data.error) {
            responseText = "Błąd: " + data.error;
          } else {
            responseText = data.response;
          }
          document.getElementById("serverResponse").innerText = responseText;
          responseModal.show();
        })
        .catch(err => {
          console.error(err);
          document.getElementById("serverResponse").innerText = "Błąd przy pobieraniu odpowiedzi serwera.";
          responseModal.show();
        });
    }
    
    function hideCertDetailsModal() { certDetailsModal.hide(); }
    function hideResponseModal() { responseModal.hide(); }
    
    function addService() {
        const host = document.getElementById("host").value;
        const port = document.getElementById("port").value;
        const protocol = document.getElementById("protocol").value;
        const region = document.getElementById("region").value;  // Pobranie wartości regionu
        
        fetch("{{ url_for('api_add_service') }}", {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify({host, port, protocol, region})
        })
            .then(r => r.json())
            .then(resp => {
            showAlert("Serwis został dodany.", "success");
            setTimeout(() => window.location.reload(), 1500);
            })
            .catch(err => {
            console.error(err);
            showAlert("Błąd przy dodawaniu serwisu.", "danger");
            });
        }

    
    function deleteService(serviceId) {
      if (!confirm("Czy na pewno chcesz usunąć ten serwis?")) return;
      const url = "{{ url_for('api_delete_service', service_id=0) }}".replace("0", serviceId);
      
      fetch(url, { method: "DELETE" })
        .then(r => r.json())
        .then(resp => {
          showAlert("Serwis został usunięty.", "success");
          setTimeout(() => window.location.reload(), 1500);
        })
        .catch(err => {
          console.error(err);
          showAlert("Błąd przy usuwaniu serwisu.", "danger");
        });
    }
    
    function editService() {
        const serviceId = document.getElementById("editServiceId").value;
        const host = document.getElementById("editHost").value;
        const port = document.getElementById("editPort").value;
        const protocol = document.getElementById("editProtocol").value;
        const region = document.getElementById("editRegion").value; // Pobranie wartości regionu
        
        fetch(`{{ url_for('api_edit_service', service_id=0) }}`.replace("0", serviceId), {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify({host, port, protocol, region})
        })
            .then(r => r.json())
            .then(resp => {
            showAlert("Serwis został zaktualizowany.", "success");
            setTimeout(() => window.location.reload(), 1500);
            })
            .catch(err => {
            console.error(err);
            showAlert("Błąd przy aktualizacji serwisu.", "danger");
            });
        }

    
    function updateService(serviceId) {
      fetch(`{{ url_for('api_update_service', service_id=0) }}`.replace("0", serviceId), { method: "POST" })
        .then(r => r.json())
        .then(resp => {
          showAlert("Serwis został zaktualizowany.", "success");
          setTimeout(() => window.location.reload(), 1500);
        })
        .catch(err => {
          console.error(err);
          showAlert("Błąd przy aktualizacji serwisu.", "danger");
        });
    }
    
    function bulkUpdate() {
      fetch("{{ url_for('api_bulk_update') }}", { method: "POST" })
        .then(r => r.json())
        .then(resp => {
          showAlert("Masowa aktualizacja wykonana.", "success");
          setTimeout(() => window.location.reload(), 1500);
        })
        .catch(err => {
          console.error(err);
          showAlert("Błąd przy masowej aktualizacji.", "danger");
        });
    }
  </script>
{% endblock %}