{% extends "template.twig" %}

{% block title %}Редактирование меню{% endblock %}
{% block head %}
    {{ parent() }}
    <style type="text/css">
    
    </style>
{% endblock %}

{% block content %}
<b>{{user.login}}</b>, вы редактируете меню. <a href="/">На главную</a>
<hr>
<b>Меню:</b>
<div id="menuHolder">
    {% if menu %}
    {% for item in menu %}
    <div>
        <input type="text" name="url" value="{{item.url}}">
        <input type="text" name="name" value="{{item.name}}">
        <button class="removeItemBtn">X</button>
    </div>
    {% endfor %}
    {% endif %}
</div>

<hr>
<div>
    <input class="inputData" type="text" name="url" placeholder="Ссылка">
    <input class="inputData" type="text" name="name" placeholder="Название">
    <button id="addItemBtn">+</button>
</div>
<button id="saveBtn">Сохранить</button>

<script>
    let menu = [];

    function updateDeleteBtns() {
        document.querySelectorAll('.removeItemBtn').forEach(e => e.onclick = function() {
            let item = this.parentNode;
            let index = menu.indexOf(item);
            menu.splice(index, 1);
            item.remove();
        });
    }

    function init() {
        let addItemBtn = document.getElementById('addItemBtn');
        let saveBtn = document.getElementById('saveBtn');
        let menuHolder = document.getElementById('menuHolder');

        let children = menuHolder.children;
        for (let i = 0; i < children.length; i++) {
            let child = children[i];
            let url = child.children[0].value;
            let name = child.children[1].value;
            menu.push({url, name});
        }
        
        addItemBtn.addEventListener('click', function() {
            let url = document.querySelector('input.inputData[name="url"]').value;
            let name = document.querySelector('input.inputData[name="name"]').value;
            let item = {
                url: url,
                name: name
            };
            menu.push(item);
            let newItem = document.createElement('div');
            newItem.innerHTML = '<input type="text" name="url" value="' + url + '"><input type="text" name="name" value="' + name + '"><button class="removeItemBtn">X</button>';
            menuHolder.appendChild(newItem);
            document.querySelector('input.inputData[name="url"]').value = '';
            document.querySelector('input.inputData[name="name"]').value = '';

            updateDeleteBtns();
        });

        saveBtn.addEventListener('click', async function() {
            let data = {
                menu: menu
            };
            let response = await fetch('/editMenu', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            });
            let result = await response.json();
            if (result.code == 200) {
                alert('Меню сохранено');
                location.reload();
            } else {
                alert(`Ошибка ${result.code}: ${result.error}`);
            }
            console.log(result);
        });

        updateDeleteBtns();
    }

    document.addEventListener('DOMContentLoaded', init);
</script>
{% endblock %}