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

{% block title %}Mahlzeiten · svc-essensplanung{% endblock %}

{% block body %}
    <div class="card">
        <div class="page-head">
            <div>
                <h1>Mahlzeiten</h1>
                <div class="subtitle">Planungsliste – per Drag &amp; Drop sortieren</div>
            </div>
            <div class="actions">
                <a class="btn" href="{{ path('mahlzeiten_neu') }}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true">
                        <path d="M12 5v14M5 12h14"/>
                    </svg>
                    Neue Mahlzeit
                </a>
            </div>
        </div>

        {% if total == 0 %}
            <p class="empty">Noch keine Mahlzeiten in der Planung.</p>
        {% else %}
            <ul class="list sortierbar">
                {% for m in mahlzeiten %}
                    {{ include('mahlzeiten/_mahlzeit.html.twig', { m: m, sortierbar: true }) }}
                {% endfor %}
            </ul>
        {% endif %}
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/sortable.min.js') }}"></script>
    <script>
        (function () {
            const liste = document.querySelector('ul.sortierbar');
            if (!liste) { return; }
            const url = '{{ path("mahlzeiten_reorder") }}';

            function speichern() {
                const ids = Array.prototype.map.call(
                    liste.querySelectorAll('li[data-id]'),
                    function (li) { return Number(li.getAttribute('data-id')); }
                );
                fetch(url, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ ids: ids }),
                }).then(function (antwort) {
                    if (!antwort.ok) { window.location.reload(); }
                }).catch(function () { window.location.reload(); });
            }

            // Auf/Ab-Buttons (mobil): Element mit Nachbar tauschen, dann speichern.
            liste.addEventListener('click', function (ereignis) {
                const knopf = ereignis.target.closest('.updown-btn');
                if (!knopf) { return; }
                const li = knopf.closest('li[data-id]');
                if (!li) { return; }
                const ziel = knopf.getAttribute('data-dir') === '1'
                    ? li.nextElementSibling
                    : li.previousElementSibling;
                if (!ziel || !ziel.matches('li[data-id]')) { return; }
                if (knopf.getAttribute('data-dir') === '1') { ziel.after(li); } else { ziel.before(li); }
                speichern();
            });

            // Drag & Drop (Desktop)
            if (typeof Sortable !== 'undefined') {
                Sortable.create(liste, {
                    handle: '.drag-handle',
                    animation: 150,
                    ghostClass: 'item-drag',
                    onEnd: speichern,
                });
            }
        })();
    </script>
{% endblock %}