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

{% block title %}FoodOrder{% endblock %}

{% block body %}
    <h1>FoodOrder</h1>

    <table class="table">
        <tbody>
            <tr>
                <th>StartedByName</th>
                <td>{{ food_order.startedBy }}</td>
            </tr>
            <tr>
                <th>Id</th>
                <td>{{ food_order.id }}</td>
            </tr>
            <tr>
                <th>StartedAt</th>
                <td>{{ food_order.startedAt ? food_order.startedAt|date('Y-m-d H:i:s') : '' }}</td>
            </tr>
            <tr>
                <th>ClosedAt</th>
                <td>
                    {% if food_order.closedAt is not null%}
                        {{ food_order.closedAt|date('Y-m-d H:i:s') }}
                    {% else %}
                        <a href="{{ path('app_foodorder_close', {id: food_order.id}) }}">close</a>
                    {% endif %}
                </td>
            </tr>
        </tbody>
    </table>
<table class="table">
    <thead>
    <tr>
        <th>Name(s)</th>
        <th>possible price</th>
        <th>actions</th>
    </tr>
    </thead>
    <tbody>
        {% for lel in food_order.groupedOrderItems %}
        <tr>
            <td>

                {{ lel.item.menuItem.aliases|map(i => i.name)|join(' / ') }}
            </td>
            <td>
                {{ lel.item.menuItem.price|cents_to_eur }}
            </td>
            <td>
                {{ lel.amount }} |
                <a href="{{ path('app_foodorder_add_item', {foodOrder: food_order.id, menuItem: lel.item.menuItem.id}) }}">+1</a> |
                <a href="{{ path('app_foodorder_remove_item', {foodOrder: food_order.id, orderItem: lel.item.id}) }}">-1</a> |

            </td>
        </tr>
    {% endfor %}
    </tbody>
    </tbody>
</table>
<table class="table">
    <thead>
    <tr>
        <th>Name(s)</th>
        <th>possible price</th>
        <th>actions</th>
    </tr>
    </thead>
    {% for item in menu_items %}
        <tr>
            <td>
                {{ item.menuItemAliases|map(i => i.name)|join(' / ') }}
            </td>
            <td>
                {{ item.price|cents_to_eur }}
            </td>
            <td>
                {% if food_order.closedAt is null %}
                    <a
                        href="#"
                        data-menuitem-id="{{ item.id }}"
                    >add</a>
                {% endif %}
            </td>
        </tr>
    {% endfor %}
</table>
<script>
    document.querySelectorAll('a[data-menuitem-id]').forEach((link) => {
        link.addEventListener('click', (event) => {
            // Prevent the default action of the link
            event.preventDefault();

            // Get the `data-menuitem-id` attribute of the clicked link
            let menuItemId = link.getAttribute('data-menuitem-id');

            // Select the corresponding dialog with the same `data-menuitem-id`. Assuming each dialog's id is the same as `data-menuitem-id`, please update the code to use proper id or class as needed.
            let dialog = document.querySelector(`dialog[data-menuitem-id="${menuItemId}"]` );

            // Open the dialog
            dialog.showModal();
        });
    });
</script>
{% endblock %}