{% extends 'layouts/app.html.twig' %}

{% block title %}{{ page_title }} | Luminous{% endblock %}

{% block app_content %}
    {% include 'partials/_flash_messages.html.twig' %}

    <div class="ops-page manual-order-page">
        <section class="ops-hero">
            <div class="ops-hero__content">
                <span class="ops-kicker"><span class="ui-icon">edit_note</span>Zamówienia ręczne</span>
                <h1>{{ page_title }}</h1>
                <p>Dodaj projekty w jednym miejscu, uzupełnij warianty i wgraj finalne mockupy przypisane do konkretnych pozycji.</p>
                {% if order %}
                    <div class="ops-meta-line">
                        <span>{{ order.externalReference }}</span>
                        <span>Status: {{ order.internalStatusCode }}</span>
                        <span>Operator: {{ order.updatedBy ? order.updatedBy.displayName : (order.createdBy ? order.createdBy.displayName : '—') }}</span>
                    </div>
                {% endif %}
            </div>
            <div class="ops-hero__actions">
                {% if order %}<a class="button button--ghost" href="{{ path('app_sales_order_show', {id: order.id}) }}"><span class="ui-icon">visibility</span>Szczegóły</a>{% endif %}
                <a class="button button--ghost" href="{{ path('app_sales_orders_index') }}"><span class="ui-icon">arrow_back</span>Lista zamówień</a>
            </div>
        </section>

        {% if readiness is defined and readiness %}
            <section class="ops-card ops-card--compact">
                <div class="ops-card__head ops-card__head--inline">
                    <div><span class="ops-card__eyebrow">Gotowość</span><h2>Aktualny wynik walidacji</h2></div>
                    <span class="ops-status {{ readiness.valid ? (readiness.warnings ? 'is-orange' : 'is-green') : 'is-red' }}">{{ readiness.valid ? (readiness.warnings ? 'ostrzeżenia' : 'gotowe') : 'błędy' }}</span>
                </div>
                {% if readiness.errors %}<div class="ops-note ops-note--error"><span class="ui-icon">error</span><ul>{% for error in readiness.errors %}<li>{{ error }}</li>{% endfor %}</ul></div>{% endif %}
                {% if readiness.warnings %}<div class="ops-note ops-note--warm"><span class="ui-icon">warning</span><ul>{% for warning in readiness.warnings %}<li>{{ warning }}</li>{% endfor %}</ul></div>{% endif %}
            </section>
        {% endif %}

        {{ form_start(form, {
            attr: {
                class: 'ops-stack manual-order-form',
                novalidate: 'novalidate',
                'data-controller': 'manual-order',
                'data-manual-order-variants-url-value': variants_endpoint_template,
                'data-manual-order-project-search-url-value': project_search_endpoint
            }
        }) }}
            {% if form_error_summary is defined and form_error_summary is not empty %}
                <div class="ops-note ops-note--error manual-order-error-summary" role="alert">
                    <span class="ui-icon">error</span>
                    <div>
                        <strong>Nie udało się zapisać zamówienia.</strong>
                        <p>Popraw wskazane pola. Zamówienie nie zostało częściowo utworzone.</p>
                        <ul>
                            {% for error in form_error_summary %}<li>{{ error }}</li>{% endfor %}
                        </ul>
                    </div>
                </div>
            {% endif %}

            <section class="ops-card manual-order-section-card">
                <div class="ops-card__head"><span class="ops-card__eyebrow">Źródło</span><h2>Dane operatora i zamówienia</h2></div>
                <div class="ops-form-grid ops-form-grid--3">
                    {{ form_row(form.manualSourceLabel) }}
                    {{ form_row(form.manualExternalReference) }}
                    {{ form_row(form.currency) }}
                </div>
                <div class="ops-form-grid ops-form-grid--2">
                    {{ form_row(form.customerNote) }}
                    {{ form_row(form.internalNote) }}
                </div>
            </section>

            <section class="ops-card manual-order-section-card">
                <div class="ops-card__head"><span class="ops-card__eyebrow">Klient</span><h2>Dane kontaktowe</h2><p>Dane są snapshotem tego zamówienia i nie tworzą globalnej kartoteki klienta.</p></div>
                <div class="ops-form-grid ops-form-grid--4">
                    {{ form_row(form.customerFirstName) }}
                    {{ form_row(form.customerLastName) }}
                    {{ form_row(form.customerEmail) }}
                    {{ form_row(form.customerPhone) }}
                </div>
            </section>

            <section class="ops-card manual-order-section-card">
                <div class="ops-card__head"><span class="ops-card__eyebrow">Dostawa</span><h2>Adres odbiorcy</h2></div>
                <div class="ops-form-grid ops-form-grid--3">
                    {{ form_row(form.deliveryType) }}
                    {{ form_row(form.shippingMethodCode) }}
                    {{ form_row(form.shippingMethodName) }}
                </div>
                <div class="ops-form-grid ops-form-grid--3">
                    {{ form_row(form.deliveryFirstname) }}
                    {{ form_row(form.deliveryLastname) }}
                    {{ form_row(form.deliveryCompany) }}
                    {{ form_row(form.deliveryAddress1) }}
                    {{ form_row(form.deliveryAddress2) }}
                    {{ form_row(form.deliveryPostcode) }}
                    {{ form_row(form.deliveryCity) }}
                    {{ form_row(form.deliveryCountryCode) }}
                    {{ form_row(form.deliveryCountryName) }}
                    {{ form_row(form.deliveryPhone) }}
                </div>
            </section>

            <section class="ops-card manual-order-section-card manual-order-pickup-card" data-manual-order-target="pickup" hidden>
                <div class="ops-card__head"><span class="ops-card__eyebrow">Punkt odbioru</span><h2>Paczkomat lub punkt</h2><p>Adres klienta pozostaje oddzielny od adresu punktu.</p></div>
                <div class="ops-form-grid ops-form-grid--3">
                    {{ form_row(form.pickupPointProvider) }}
                    {{ form_row(form.pickupPointCode) }}
                    {{ form_row(form.pickupPointName) }}
                    {{ form_row(form.pickupPointAddress1) }}
                    {{ form_row(form.pickupPointAddress2) }}
                    {{ form_row(form.pickupPointPostcode) }}
                    {{ form_row(form.pickupPointCity) }}
                    {{ form_row(form.pickupPointCountryCode) }}
                </div>
            </section>

            <section class="ops-card manual-order-products-card">
                <div class="ops-card__head">
                    <span class="ops-card__eyebrow">Produkty</span>
                    <h2>Dodaj projekty do zamówienia</h2>
                    <p>Wyszukiwarka pokazuje projekty od razu. Po wybraniu wariantu projekt trafia do jednej wspólnej listy pozycji poniżej.</p>
                </div>

                <div class="manual-order-project-add">
                    <div class="manual-order-project-search-panel">
                        <label class="form-label" for="manual-order-project-search">Wyszukaj projekt</label>
                        <div class="manual-order-search-box">
                            <span class="ui-icon" aria-hidden="true">search</span>
                            <input
                                id="manual-order-project-search"
                                class="form-control"
                                type="search"
                                placeholder="Wpisz nazwę lub symbol projektu…"
                                autocomplete="off"
                                data-manual-order-target="projectSearch"
                                data-action="input->manual-order#searchProjects focus->manual-order#searchProjects"
                            >
                            <span class="manual-order-search-spinner" data-manual-order-target="searchSpinner" hidden aria-label="Wyszukiwanie"></span>
                        </div>
                        <p class="form-help">Wyniki są pobierane AJAX-em. Wybierz wariant i kliknij „Dodaj”.</p>

                        <div class="manual-order-project-results" data-manual-order-target="projectResults" aria-live="polite">
                            <div class="manual-order-project-results__placeholder">
                                <span class="ui-icon">manage_search</span>
                                <p>Zacznij pisać albo kliknij pole, aby zobaczyć projekty.</p>
                            </div>
                        </div>
                    </div>

                    <div class="manual-order-project-fallback">
                        <div class="manual-order-section-heading">
                            <div>
                                <span class="ops-card__eyebrow">Wybór ręczny</span>
                                <h3>Dodaj bez wyszukiwarki</h3>
                            </div>
                        </div>
                        <label class="form-label" for="manual-order-manual-project">Projekt</label>
                        <select id="manual-order-manual-project" class="form-control" data-manual-order-target="manualProject" data-action="change->manual-order#manualProjectChanged">
                            <option value="">Wybierz projekt…</option>
                            {% for project in manual_projects %}
                                <option value="{{ project.id }}" data-project-symbol="{{ project.symbol }}" data-project-name="{{ project.name }}" data-project-product-type="{{ project.productType ? project.productType.name : '' }}">
                                    {{ project.symbol }} — {{ project.name }}
                                </option>
                            {% endfor %}
                        </select>

                        <label class="form-label" for="manual-order-manual-variant">Wariant</label>
                        <select id="manual-order-manual-variant" class="form-control" data-manual-order-target="manualVariant" data-action="change->manual-order#manualVariantChanged" disabled>
                            <option value="">Najpierw wybierz projekt…</option>
                        </select>

                        <button type="button" class="button button--primary manual-order-project-fallback__add" data-manual-order-target="manualAddButton" data-action="manual-order#addManualProject" disabled>
                            <span class="ui-icon">add</span>Dodaj projekt
                        </button>
                    </div>
                </div>

                <div class="manual-order-picker-message" data-manual-order-target="pickerMessage" hidden role="status"></div>

                {{ form_errors(form.items) }}

                {% set item_prototype %}
                    {% include 'sales_order/_manual_order_item_fields.html.twig' with {
                        item_form: form.items.vars.prototype,
                        manual_item_mockups: manual_item_mockups|default({})
                    } only %}
                {% endset %}

                <div class="manual-order-items-heading">
                    <div>
                        <span class="ops-card__eyebrow">Pozycje zamówienia</span>
                        <h3>Dodane projekty</h3>
                    </div>
                    <span class="ops-soft-badge"><strong data-manual-order-target="itemCount">{{ form.items|length }}</strong> pozycji</span>
                </div>

                <div class="manual-order-items-empty" data-manual-order-target="emptyState" {{ form.items|length > 0 ? 'hidden' : '' }}>
                    <span class="ui-icon">inventory_2</span>
                    <div>
                        <strong>Lista jest pusta</strong>
                        <p>Wyszukaj projekt powyżej i dodaj co najmniej jedną pozycję.</p>
                    </div>
                </div>

                <div class="manual-order-items"
                     data-manual-order-target="items"
                     data-index="{{ form.items|length }}"
                     data-prototype="{{ item_prototype|e('html_attr') }}">
                    {% for item_form in form.items %}
                        <article class="manual-order-item" data-manual-order-item>
                            {% include 'sales_order/_manual_order_item_fields.html.twig' with {
                                item_form: item_form,
                                manual_item_mockups: manual_item_mockups|default({})
                            } only %}
                        </article>
                    {% endfor %}
                </div>
            </section>

            {{ form_rest(form) }}
            <div class="ops-form-actions ops-form-actions--sticky">
                <a class="button button--ghost" href="{{ order ? path('app_sales_order_show', {id: order.id}) : path('app_sales_orders_index') }}">Anuluj</a>
                <button class="button button--primary" type="submit"><span class="ui-icon">save</span>{{ order ? 'Zapisz zmiany' : 'Utwórz zamówienie' }}</button>
            </div>
        {{ form_end(form, {render_rest: false}) }}
    </div>
{% endblock %}