{% extends "layout.html" %}
{% block content %}
<h2 style="text-align: center;">Wybierz typ serwera</h2>

<div style="display: flex; justify-content: center; gap: 2rem; margin-bottom: 2rem;">
  <button class="square-button" onclick="selectType(this, 'paper')">
    <img src="https://docs.papermc.io/assets/images/papermc-logomark-512-f125384f3367cd4d9291ca983fcb7334.png" alt="Paper">
    <b>Paper</b>
    <br>
    <p>Zoptymalizowany serwer Minecraft oferujący lepszą wydajność.</p>
  </button>
  <button class="square-button" onclick="selectType(this, 'fabric')">
    <img src="https://fabricmc.net/assets/logo.png" alt="Fabric">
    <b>Fabric</b>
    <br>
    <p>Lekki silnik modyfikacji, znany z elastyczności i niskiej wagi.</p>
  </button>
</div>

<div id="version-select" class="tab-content" style="display: none;">
  <div style="display: flex; flex-direction: column; align-items: center;">
    <h2>Wpisz wersję</h2>
    <input type="text" id="version" class="tab-button" placeholder="Np. 1.20.4" style="text-align: center;">
    <br>

    <label style="text-align: center;">
      <input type="checkbox" id="eula-checkbox" onchange="toggleCreateButton()">
      Akceptuję <a href="https://account.mojang.com/documents/minecraft_eula" target="_blank">Minecraft EULA</a>
    </label>
    <br>

    <button class="btn btn-primary" id="create-button" onclick="finishSetup()" disabled>Stwórz serwer</button>
  </div>
</div>

<script>
let serverType = '';

function selectType(el, type) {
    serverType = type;
    document.querySelectorAll('.square-button').forEach(btn => btn.classList.remove('selected'));
    el.classList.add('selected');
    const versionSection = document.getElementById('version-select');
    versionSection.style.display = 'block';
}

function toggleCreateButton() {
    const checkbox = document.getElementById('eula-checkbox');
    const button = document.getElementById('create-button');
    button.disabled = !checkbox.checked;
}

function finishSetup() {
    const version = document.getElementById('version').value;
    const acceptedEula = document.getElementById('eula-checkbox').checked;

    if (!acceptedEula) return;

    fetch('/api/setup', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ type: serverType, version: version, accepted_eula: acceptedEula })
    }).then(res => res.json()).then(data => {
        if (data.success) {
            window.location.href = "/dashboard";
        }
    });
}
</script>
{% endblock %}