{% extends 'base.html.twig' %}

{% block content %}
    <h1>Neue Quest erstellen</h1>

    {{ form_start(form) }}
    {{ form_row(form.name) }}
    {{ form_row(form.description) }}
    {{ form_row(form.repeatable) }}
    {{ form_row(form.min) }}
    {{ form_row(form.max) }}

    <h2>Quest Steps</h2>

    {% for step in form.questTemplateSteps %}
        <div class="step-form">
            {{ form_row(step.step) }}

            <h3>Step Locations</h3>
            {% for location in step.questTemplateStepLocation %}
                {{ form_row(location) }}
            {% endfor %}

            <h3>Items für diesen Step</h3>
            {% for item in step.questTemplateStepItems %}
                {{ form_row(item) }}
            {% endfor %}
        </div>
    {% endfor %}

    <button type="submit">Speichern</button>
    {{ form_end(form) }}




{#    <script>#}
{#        document.addEventListener("DOMContentLoaded", function() {#}
{#            let stepsContainer = document.querySelector("#steps");#}
{#            let addStepButton = document.querySelector("#add-step");#}
{#            let stepIndex = document.querySelectorAll(".step-form").length;#}

{#            let prototype = stepsContainer.dataset.prototype ?? null;#}

{#            if (!prototype) {#}
{#                console.error('Prototype for steps is undefined.');#}
{#                return;#}
{#            }#}

{#            // Neues Step-Formular hinzufügen#}
{#            addStepButton.addEventListener("click", function() {#}
{#                let newForm = prototype.replace(/__name__/g,#}
{#                );#}
{#                let div = document.createElement("div");#}
{#                div.classList.add("step-form");#}
{#                div.id = `step-${stepIndex}`;#}
{#                div.innerHTML = newForm;#}
{#                stepsContainer.appendChild(div);#}

{#                // IDs für neue Step-Elemente setzen#}
{#                div.querySelector(".locations-container").id = `locations-${stepIndex}`;#}
{#                div.querySelector(".items-container").id = `items-${stepIndex}`;#}
{#                div.querySelector(".add-location").dataset.stepIndex = stepIndex;#}
{#                div.querySelector(".add-item").dataset.stepIndex = stepIndex;#}

{#                initializeStepControls(div, stepIndex);#}

{#                stepIndex++;#}
{#            });#}

{#            // Buttons für existierende Steps initialisieren#}
{#            document.querySelectorAll(".step-form").forEach((stepDiv, index) => {#}
{#                initializeStepControls(stepDiv, index);#}
{#            });#}

{#            function initializeStepControls(stepDiv, stepIndex) {#}
{#                let addLocationButton = stepDiv.querySelector(".add-location");#}
{#                let addItemButton = stepDiv.querySelector(".add-item");#}

{#                addLocationButton.addEventListener("click", function() {#}
{#                    let container = document.querySelector(`#locations-${stepIndex}`);#}
{#                    let locationPrototype = container?.dataset.prototype ?? null;#}

{#                    if (locationPrototype) {#}
{#                        let newLocationForm = locationPrototype.replace(/__name__/g, `${stepIndex}_` + container.children.length);#}
{#                        let div = document.createElement("div");#}
{#                        div.innerHTML = newLocationForm;#}
{#                        container.appendChild(div);#}
{#                    } else {#}
{#                        console.error('Prototype for locations is missing.');#}
{#                    }#}
{#                });#}

{#                addItemButton.addEventListener("click", function() {#}
{#                    let container = document.querySelector(`#items-${stepIndex}`);#}
{#                    let itemPrototype = container?.dataset.prototype ?? null;#}

{#                    if (itemPrototype) {#}
{#                        let newItemForm = itemPrototype.replace(/__name__/g, `${stepIndex}_` + container.children.length);#}
{#                        let div = document.createElement("div");#}
{#                        div.innerHTML = newItemForm;#}
{#                        container.appendChild(div);#}
{#                    } else {#}
{#                        console.error('Prototype for items is missing.');#}
{#                    }#}
{#                });#}
{#            }#}
{#        });#}
{#    </script>#}

{% endblock %}