{% extends "@ContaoCore/Backend/be_page.html.twig" %}
{% block headline %}
    <span>Weinanlieferung</span> <span>Tages-Übersicht</span>
{% endblock %}

{% block error %}
{% endblock %}

{% block main %}
    <div class="tl_panel">
        <div id="vr-daily-schedule-zoom" class="tl_submit_panel">
            <label for="daily-zoom-slider">Zoom</label>
            <input type="range" id="daily-zoom-slider" min="4.5" max="12" step="1.5" value="6">
            <button id="daily-zoom-in" class="tl_submit">+</button>
            <button id="daily-zoom-out" class="tl_submit">-</button>
            <button id="daily-zoom-reset" class="tl_submit" data-default="3">Reset</button>
        </div>
        <script>
            const zoomPanel = document.querySelector('#vr-daily-schedule-zoom');
            const root = document.querySelector(':root');
            const rootStyles = getComputedStyle(root);
            const defaultZoom = rootStyles.getPropertyValue('--slot-height');

            zoomPanel.querySelectorAll('button').forEach((element) => {
                element.addEventListener('click',() => {
                    let currentVal = rootStyles.getPropertyValue('--slot-height');
                    let split = currentVal.match(/^([-.\d]+(?:\.\d+)?)(.*)$/);
                    [value,unit] = [parseFloat(split[1]),split[2] ? split[2] : ''];

                    if (element.id == 'daily-zoom-in' && value < 12)
                    {
                        root.style.setProperty('--slot-height',(value + 1.5) + unit);
                    } else if (element.id == 'daily-zoom-out' && value >= 4.5)
                    {
                        root.style.setProperty('--slot-height',(value - 1.5) + unit);
                    } else if (element.id == 'daily-zoom-reset')
                    {
                        root.style.setProperty('--slot-height',defaultZoom);
                    }
                    zoomPanel.querySelector('#daily-zoom-slider').value = parseFloat(rootStyles.getPropertyValue('--slot-height'));
                });
            });

            zoomPanel.querySelector('#daily-zoom-slider').addEventListener('input',(event) => {
                let currentVal = rootStyles.getPropertyValue('--slot-height');
                let split = currentVal.match(/^([-.\d]+(?:\.\d+)?)(.*)$/);
                [value,unit] = [parseFloat(split[1]),split[2] ? split[2] : ''];

                root.style.setProperty('--slot-height',event.target.value + unit);
            });
        </script>
    </div>
    <div class="vr-daily-schedule">
        <div class="daily-timeline-container">
            <div class="daily-timeline">
                {% for time in 0..23 %}
                    <div class="daily-timeline-label-container">
                        <div class="daily-timeline-label">{{ '%1$02d:00'|format(time) }}</div>
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="daily-grid-container">
            <div class="daily-grid">
                <div class="daily-grid-hourlines">
                    {% for line in 1..24 %}
                        <div class="line"></div>
                    {% endfor %}
                </div>
                <div class="daily-grid-cells-container">
                    <div class="daily-grid-cells">
                        {% for row, event in events %}
                            {% if event is not null %}
                                <div class="event-cell" style="grid-row: {{ event.rowStart }} / {{ event.rowEnd }}">
                                    <div class="event-title">{{ event.location.title }}</div>
                                    <div class="event-time">{{ event.slot.time|date("H:i") }} - {{ (event.slot.time + event.slot.duration*60)|date("H:i") }}</div>
                                </div>
                            {% else %}
                                <div class="cell-placeholder" style="grid-row: {{ row }} / {{ row }}">+ Neuer Slot</div>
                            {% endif %}
                        {% endfor %}{#
                        {% for line in [8,28,30,76] %}
                            <div class="event-cell" style="grid-row: {{ line }} / {{ line+4 }}">
                                <div class="event-title">Standort 1</div>
                                <div class="event-time">XX:XX - XX:XX</div>
                            </div>
                        {% endfor %} #}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}