{% extends "base.html" %}
{% block title %}Złóż zamówienie{% endblock %}

{% block content %}
<section class="panel">
    <h2>Twoje zamówienie – tura nr {{ round_number }}</h2>
    {% if not ordering_open %}
        <p class="notice warning">Zamawianie jest obecnie zamknięte. Skontaktuj się z organizatorem.</p>
    {% endif %}
    {% if not menu_items %}
        <p class="notice">Brak pozycji w menu. Poproś organizatora o odświeżenie.</p>
    {% else %}
    <form id="order-form" method="post" class="order-form" {% if not ordering_open %}aria-disabled="true"{% endif %}>
        <div class="form-field">
            <label for="customer_name">Imię i nazwisko lub nazwa zespołu</label>
            <input type="text" id="customer_name" name="customer_name" placeholder="np. Anna Nowak" required {% if not ordering_open %}disabled{% endif %}>
        </div>
        <div class="menu-sections">
            {% for section in menu_sections %}
                <section class="menu-section">
                    <h3>{{ section.name }}</h3>
                    <div class="menu-section-items">
                        {% for item in section.entries %}
                            <article class="menu-entry" data-item-id="{{ item.id }}">
                                <div class="menu-entry-summary">
                                    <div class="menu-entry-text">
                                        <span class="menu-entry-name">{{ item.name }}</span>
                                        {% if item.description %}
                                            <span class="menu-entry-description">{{ item.description }}</span>
                                        {% endif %}
                                    </div>
                                    <span class="menu-entry-price">{{ format_price(item.price_cents) }}</span>
                                </div>
                                <div class="menu-entry-controls">
                                    <div class="menu-entry-field">
                                        <label for="item-{{ item.id }}-quantity">Ile?</label>
                                        <input
                                            type="number"
                                            id="item-{{ item.id }}-quantity"
                                            name="items-{{ item.id }}-quantity"
                                            min="0"
                                            value="0"
                                            step="1"
                                            data-price="{{ item.price_cents }}"
                                            {% if not ordering_open %}disabled{% endif %}
                                        >
                                    </div>
                                    <div class="menu-entry-field comment">
                                        <label for="item-{{ item.id }}-comment">Komentarz</label>
                                        <input
                                            type="text"
                                            id="item-{{ item.id }}-comment"
                                            name="items-{{ item.id }}-comment"
                                            placeholder="np. bez cebuli"
                                            {% if not ordering_open %}disabled{% endif %}
                                        >
                                    </div>
                                </div>
                            </article>
                        {% endfor %}
                    </div>
                </section>
            {% endfor %}
        </div>
        <div class="order-total">
            <span>Łączna kwota:</span>
            <strong id="order-total">0,00 zł</strong>
        </div>
        <button type="submit" class="primary" {% if not ordering_open %}disabled{% endif %}>Wyślij zamówienie</button>
    </form>
    {% endif %}
</section>
{% endblock %}

{% block nav_links %}
<a href="{{ url_for('order_form') }}">Strona zamawiających</a>
{% endblock %}

{% block scripts %}
<script>
(function () {
    const form = document.getElementById('order-form');
    if (!form) {
        return;
    }
    const totalDisplay = document.getElementById('order-total');

    function formatPrice(cents) {
        const value = (cents / 100).toFixed(2).replace('.', ',');
        return value + ' zł';
    }

    function updateTotal() {
        let total = 0;
        form.querySelectorAll('input[data-price]').forEach(input => {
            const price = parseInt(input.getAttribute('data-price'), 10);
            const quantity = parseInt(input.value, 10);
            if (Number.isFinite(price) && Number.isFinite(quantity) && quantity > 0) {
                total += price * quantity;
            }
        });
        totalDisplay.textContent = formatPrice(total);
    }
    form.querySelectorAll('input[data-price]').forEach(input => {
        input.addEventListener('input', updateTotal);
    });
    updateTotal();
})();
</script>
{% endblock %}