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

{% block content %}
    <div class="container-fluid">
        <div class="row mb-4">
            <div class="col-md-6 mx-auto">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h1 class="mb-0">Quest bearbeiten: {{ quest.name }}</h1>
                        <div class="btn-group" role="group">
                            <button class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-save"></i> Speichern
                            </button>
                            <button class="btn btn-outline-secondary btn-sm">
                                <i class="fas fa-times"></i> Abbrechen
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <p class="text-muted">{{ quest.description }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mx-auto">
                <div class="card">
                    <div class="card-body">
                        {{ form_start(form) }}
                        <div class="row">
                            <div class="col-md-6" id="itemField">
                                <h4>Items</h4>
                                <div id="quest_template_step_items"
                                     data-prototype="{{ form_row(form.items.vars.prototype)|e('html') }}">
                                </div>
                                <button type="button" class="btn btn-secondary mt-2" id="add-item-btn">
                                    <i class="fas fa-plus"></i> Item hinzufügen
                                </button>
                            </div>

                            <div class="col-md-6" id="locationField">
                                <h4>Locations</h4>
                                <div id="quest_template_step_locations"
                                     data-prototype="{{ form_row(form.locations.vars.prototype)|e('html') }}">
                                </div>
                                <button type="button" class="btn btn-secondary mt-2" id="add-location-btn">
                                    <i class="fas fa-plus"></i> Location hinzufügen
                                </button>
                            </div>
                        </div>

                        <div class="mt-3">
                            <button type="submit" class="btn btn-success">Step hinzufügen</button>
                        </div>

                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-6 mx-auto">
                <div class="card">
                    <div class="card-header">
                        <h2 class="mb-0">Bestehende Steps</h2>
                    </div>
                    <div class="card-body">
                        <div class="accordion" id="stepsAccordion">
                            {% for stepNumber, stepData in groupedSteps %}
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="heading{{ stepNumber }}">
                                        <button class="accordion-button {% if not loop.first %}collapsed{% endif %}"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#collapse{{ stepNumber }}"
                                                aria-expanded="{{ loop.first ? 'true' : 'false' }}"
                                                aria-controls="collapse{{ stepNumber }}">
                                            Step {{ stepNumber }}
                                        </button>
                                    </h2>
                                    <div id="collapse{{ stepNumber }}"
                                         class="accordion-collapse collapse {{ loop.first ? 'show' : '' }}"
                                         aria-labelledby="heading{{ stepNumber }}"
                                         data-bs-parent="#stepsAccordion">
                                        <div class="accordion-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <h5>Items</h5>
                                                    {% if stepData.items is not empty %}
                                                        <div class="list-group">
                                                            {% for item in stepData.items %}
                                                                <div class="list-group-item list-group-item-action">
                                                                    <div class="d-flex w-100 justify-content-between">
                                                                        <h5 class="mb-1">{{ item.itemName }}</h5>
                                                                        <small class="badge bg-primary rounded-pill">{{ item.quantity }} x</small>
                                                                    </div>
                                                                    <p class="mb-1">
                                                                        <strong>Koordinaten:</strong>
                                                                        X: {{ item.locationX }},
                                                                        Y: {{ item.locationY }},
                                                                        Z: {{ item.locationZ }}
                                                                    </p>
                                                                    <div class="d-flex justify-content-end">
                                                                        <a href="{{ path('quest_template_quest_step_remove_item', { 'stepId': stepNumber, 'itemId': item.id }) }}"
                                                                           class="btn btn-danger btn-sm">
                                                                            <i class="fas fa-trash"></i> Löschen
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            {% endfor %}
                                                        </div>
                                                    {% else %}
                                                        <p class="text-muted">Keine Items</p>
                                                    {% endif %}
                                                </div>
                                                <div class="col-md-6">
                                                    <h5>Locations</h5>
                                                    {% if stepData.locations is not empty %}
                                                        <div class="list-group">
                                                            {% for location in stepData.locations %}
                                                                <div class="list-group-item list-group-item-action">
                                                                    <div class="d-flex w-100 justify-content-between">
                                                                        <h5 class="mb-1">Location Koordinaten</h5>
                                                                    </div>
                                                                    <p class="mb-1">
                                                                        <strong>Start:</strong>
                                                                        X: {{ location.locationX }},
                                                                        Y: {{ location.locationY }},
                                                                        Z: {{ location.locationZ }}
                                                                    </p>
                                                                    <p class="mb-1">
                                                                        <strong>Ende:</strong>
                                                                        X: {{ location.locationX2 }},
                                                                        Y: {{ location.locationY2 }},
                                                                        Z: {{ location.locationZ2 }}
                                                                    </p>
                                                                    <div class="d-flex justify-content-end">
                                                                        <a href="{{ path('quest_template_quest_step_remove_location', { 'stepId': stepNumber, 'locationId': location.id }) }}"
                                                                           class="btn btn-danger btn-sm">
                                                                            <i class="fas fa-trash"></i> Löschen
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            {% endfor %}
                                                        </div>
                                                    {% else %}
                                                        <p class="text-muted">Keine Locations</p>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <div class="mt-3 text-center">
                                                <a href="{{ path('quest_template_quest_step_add_item', { 'stepId': stepNumber }) }}"
                                                   class="btn btn-outline-success btn-sm me-2">
                                                    <i class="fas fa-plus"></i> Item hinzufügen
                                                </a>
                                                <a href="{{ path('quest_template_quest_step_add_location', { 'stepId': stepNumber }) }}"
                                                   class="btn btn-outline-success btn-sm">
                                                    <i class="fas fa-plus"></i> Location hinzufügen
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        document.addEventListener("DOMContentLoaded", function() {

            let addItemBtn = document.getElementById("add-item-btn");
            let addLocationBtn = document.getElementById("add-location-btn");
            let itemContainer = document.getElementById("quest_template_step_items");
            let locationContainer = document.getElementById("quest_template_step_locations");

            // Fehlerbehandlung, falls Elemente nicht existieren
            if (!addItemBtn || !addLocationBtn || !itemContainer || !locationContainer) {
                console.error("Ein oder mehrere Formularelemente konnten nicht gefunden werden.");
                return;
            }

            // Funktion zum Hinzufügen neuer Items
            addItemBtn.addEventListener("click", function() {
                let prototype = itemContainer.dataset.prototype;
                let index = itemContainer.children.length;
                let newForm = prototype.replace(/__name__/g, index);

                let newDiv = document.createElement('div');
                newDiv.innerHTML = newForm;
                itemContainer.appendChild(newDiv);
            });

            // Funktion zum Hinzufügen neuer Locations
            addLocationBtn.addEventListener("click", function() {
                let prototype = locationContainer.dataset.prototype;
                let index = locationContainer.children.length;
                let newForm = prototype.replace(/__name__/g, index);

                let newDiv = document.createElement('div');
                newDiv.innerHTML = newForm;
                locationContainer.appendChild(newDiv);
            });
        });
    </script>
{% endblock %}