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

{% block title %}Neue Danger Zone{% endblock %}

{% block content %}
    <style>
        input[type="checkbox"].form-control {
            width: auto;  /* Stellt sicher, dass die Checkbox nicht die volle Breite einnimmt */
            padding: 0;   /* Entfernt unnötiges Padding */
            margin: 0;    /* Entfernt den Standardabstand */
            appearance: checkbox; /* Stellt sicher, dass das Erscheinungsbild der Checkbox korrekt ist */
        }
        .table {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
        }

        .table th,
        .table td {
            padding: 10px;
            text-align: left;
            border: 1px solid #ddd;
        }

        .table th {
            background-color: #f8f9fa;
            font-weight: bold;
        }

        .table td input[type="checkbox"] {
            margin-right: 10px;
        }

        /* Stil für Spawner-Formulare */
        .spawner-card {
            margin-top: 15px;
        }

        .remove-spawner {
            margin-top: 10px;
            background-color: #dc3545;
            color: white;
            border: none;
            padding: 5px 10px;
        }

        .remove-spawner:hover {
            background-color: #c82333;
        }
    </style>

    <div class="container mt-4">
        <h1 class="mb-4">Neue Danger Zone erstellen</h1>

        <div class="card shadow-sm">
            <div class="card-body">
                {{ form_start(form) }}

                <h2 class="h5 mb-3">Allgemeine Informationen</h2>
                <div class="mb-3">
                    {{ form_row(form.name, {'attr': {'class': 'form-control'}}) }}
                </div>

                <h2 class="h5 mt-4">Koordinaten</h2>
                <div class="row g-3">
                    <div class="col-md-6">
                        {{ form_row(form.maxX, {'attr': {'class': 'form-control'}}) }}
                    </div>
                    <div class="col-md-6">
                        {{ form_row(form.maxY, {'attr': {'class': 'form-control'}}) }}
                    </div>
                    <div class="col-md-6">
                        {{ form_row(form.minX, {'attr': {'class': 'form-control'}}) }}
                    </div>
                    <div class="col-md-6">
                        {{ form_row(form.minY, {'attr': {'class': 'form-control'}}) }}
                    </div>
                </div>

                <h2 class="h5 mt-4">Spawner hinzufügen</h2>
                <div id="spawners-list" class="row g-3" data-prototype="{{ form_widget(form.spawners.vars.prototype)|e }}">
                    {% for spawner in form.spawners %}
                        <div class="col-md-6 spawner-card">
                            <div class="card border-primary">
                                <div class="card-body">
                                    <h4 class="h6 mb-3">Spawner {{ loop.index }}</h4>

                                    <div class="mb-3">
                                        {{ form_row(spawner.name, {'attr': {'class': 'form-control'}}) }}
                                    </div>
                                    <div class="mb-3">
                                        {{ form_row(spawner.xCoord, {'attr': {'class': 'form-control'}}) }}
                                    </div>
                                    <div class="mb-3">
                                        {{ form_row(spawner.yCoord, {'attr': {'class': 'form-control'}}) }}
                                    </div>
                                    <div class="mb-3">
                                        {{ form_row(spawner.zCoord, {'attr': {'class': 'form-control'}}) }}
                                    </div>
                                    <div class="mb-3">
                                        {{ form_row(spawner.minZombies, {'attr': {'class': 'form-control'}}) }}
                                    </div>
                                    <div class="mb-3">
                                        {{ form_row(spawner.maxZombies, {'attr': {'class': 'form-control'}}) }}
                                    </div>
                                    <div class="mb-3">
                                        {{ form_row(spawner.minInterval, {'attr': {'class': 'form-control'}}) }}
                                    </div>
                                    <div class="mb-3">
                                        {{ form_row(spawner.maxInterval, {'attr': {'class': 'form-control'}}) }}
                                    </div>

                                    <div class="mb-3">
                                        <label for="zombie-types-{{ loop.index }}">Zombie-Typen</label>
                                        <table class="table">
                                            <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Zombie-Typ</th>
                                                <th>Auswahl</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {% for choice in spawner.zombieTypes %}
                                                <tr>
                                                    <td>{{ loop.index0 + 1 }}</td>
                                                    <td>{{ choice }}</td>
                                                    <td>
                                                        <input class="form-check-input" type="checkbox" name="{{ spawner.vars.full_name }}[zombieTypes][]" value="{{ choice }}" id="zombie-type-{{ loop.index }}-{{ loop.index0 }}">
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                            </tbody>
                                        </table>

                                    </div>

                                    <button type="button" class="btn remove-spawner">Spawner entfernen</button>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>

                <button type="button" id="add-spawner" class="btn btn-outline-primary mt-3">Spawner hinzufügen</button>

                <div class="mt-4">
                    {{ form_row(form.save, {'attr': {'class': 'btn btn-success'}}) }}
                </div>

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

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let list = document.getElementById('spawners-list');
            let prototype = list.dataset.prototype;
            let index = list.children.length;

            document.getElementById('add-spawner').addEventListener('click', function () {
                let newForm = prototype.replace(/__name__/g, index);
                let div = document.createElement('div');
                div.classList.add('col-md-6', 'spawner-card');
                div.innerHTML = `
                    <div class="card border-primary">
                        <div class="card-body">
                            <h4 class="h6 mb-3">Spawner ${index + 1}</h4>
                            ${newForm}
                            <button type="button" class="btn remove-spawner">Spawner entfernen</button>
                        </div>
                    </div>
                `;

                let formControls = div.querySelectorAll('input, select, textarea');
                formControls.forEach(input => {
                    input.classList.add('form-control');
                });

                div.querySelector('.remove-spawner').addEventListener('click', function () {
                    div.remove();
                });

                list.appendChild(div);
                index++;
            });

            document.querySelectorAll('.remove-spawner').forEach(button => {
                button.addEventListener('click', function () {
                    this.closest('.col-md-6').remove();
                });
            });
        });
    </script>
{% endblock %}