{% extends 'admin/@layout.html.twig' %}

{% block content %}
    {{ form_start(form) }}
    <div class="row" data-controller="order-editor">
        <div class="col-8">
            <div class="card">
                <div class="card-header">
                    <h3 data-order-id="{{ order.id }}">{{ 'title_order_update'|trans({'{id}': order.id}, 'admin') }}</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-2">
                            {{ form_label(form.state) }}
                        </div>
                        <div class="col-4">
                            {{ form_widget(form.state) }}
                            {{ form_errors(form.state) }}
                        </div>
                        <div class="col-2">
                            {{ form_label(form.email) }}
                        </div>
                        <div class="col-4">
                            {{ form_widget(form.email) }}
                            {{ form_errors(form.email) }}
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-6">
                            <h4>{{ 'delivery_address'|trans({}, 'admin') }}</h4>
                            {{ form_row(form.deliveryAddress) }}
                        </div>
                        <div class="col-6">
                            <h4>{{ 'billing_address'|trans({}, 'admin') }}</h4>
                            {{ form_row(form.billingAddress) }}
                        </div>
                    </div>
                    <div class="row mt-3"
                         data-order-item-prototype="{{ form_row(form.orderItems.vars.prototype)|e('html_attr') }}">
                        <div class="col-12">
                            {% if not form.orderItems.children|length %}
                                <twig:alert message="no_records_found" translationDomain="admin" type="info"/>
                            {% else %}
                                <table id="order-item-list">
                                    <thead>
                                    <tr>
                                        <th>{{ 'dt.columns.productName'|trans({}, 'admin') }}</th>
                                        <th>{{ 'dt.columns.quantity'|trans({}, 'admin') }}</th>
                                        <th>{{ 'dt.columns.unitPrice'|trans({}, 'admin') }}</th>
                                        <th>{{ 'dt.columns.unitTax'|trans({}, 'admin') }}</th>
                                        <th>{{ 'dt.columns.totalPrice'|trans({}, 'admin') }}</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for row in form.orderItems.children %}
                                        <tr data-id="{{ row.vars.data.id }}">
                                            <td>
                                                {{ form_widget(row.productName) }}
                                                {{ form_widget(row.productId) }}
                                                {{ form_widget(row.order) }}
                                            </td>
                                            <td>{{ form_widget(row.quantity) }}</td>
                                            <td>{{ form_widget(row.unitPrice) }}</td>
                                            <td>
                                                <div class="input-group">
                                                    {{ form_widget(row.unitTax) }}
                                                    <span class="input-group-text"> %</span>
                                                </div>
                                            </td>
                                            <td class="text-right total-item-price">{{ row.vars.data.totalPrice|money }}</td>
                                            <td>
                                                <div class="order-item-action text-danger"
                                                     data-action="click->order-editor#removeItem">
                                                    <twig:icon name="trashCan"/>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            {% endif %}

                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-4">
                            {{ form_widget(form.addProduct) }}
                        </div>
                        <div class="col-4 col-combination d-none">
                            <div id="combination-select"></div>
                        </div>
                        <div class="col-4">
                            <twig:link_button label="button_add_order_item" :attr="{
                                'class': 'btn btn-primary',
                                'data-action': 'order-editor#addItem:prevent'
                                }"/>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-3 offset-6">
                            <div class="text-right">{{ 'total_tax'|trans({}, 'admin') }}</div>
                        </div>
                        <div class="col-3">
                            <div class="text-right total-tax">{{ order.totalTax|money }}</div>
                        </div>
                        <div class="col-3 offset-6">
                            <div class="text-right">{{ 'total_price'|trans({}, 'admin') }}</div>
                        </div>
                        <div class="col-3">
                            <div class="text-right total-price">{{ order.totalPrice|money }}</div>
                        </div>
                        <div class="col-3 offset-6">
                            <div class="text-right">{{ 'dt.columns.carrierPrice'|trans({}, 'admin') }}</div>
                        </div>
                        <div class="col-3">
                            <div class="text-right" data-carrier-price="{{ order.carrierPrice }}">{{ order.carrierPrice|money }}</div>
                        </div>
                        <div class="col-3 offset-6">
                            <h5 class="text-right">{{ 'total_price_with_tax'|trans({}, 'admin') }}</h5>
                        </div>
                        <div class="col-3">
                            <h5 class="text-right total-price-with-tax">{{ order.totalPriceWithTax|money }}</h5>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-12">
                            {{ form_row(form.notes) }}
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-12 text-right">
                            <twig:button_save/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="card card-default">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fa-solid fa-clock-rotate-left"></i>
                        {{ 'history_of_states'|trans({}, 'admin') }}
                    </h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    {% for historyState in historyStates %}
                    <div class="callout" style="border-left-color: {{ historyState.orderState.color }};">
                        <h5>
                            {{ 'dt.columns.stateName'|trans({}, 'admin') }}:
                            {{ historyState.orderState.translation(shop.currentLocale).name }}
                        </h5>
                        <p>{{ 'dt.columnName.createdAt'|trans({}, 'admin') }}: {{ historyState.createdAt|format_datetime }}</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {{ form_end(form) }}
{% endblock %}