{% extends '@CanaryCMS/layout.html.twig' %}
{% set html_title = 'Order #' ~ order.orderNumber %}

{% do canary_include_style_file('assets/styles/canary-orders.css') %}

{% block content %}
    <div class="cms-main-breadcrumbs">
        <div class="cms-main-breadcrumbs-item">
            <a href="{{ path('app_cms_orders_index') }}" class="cms-main-breadcrumbs-link">Orders</a>
        </div>
    </div>

    <div class="cms-main-header">
        <h1 class="cms-main-title">{{ html_title }}</h1>
        <div class="cms-main-header-action">
            <a href="{{ path('app_cms_orders_pdf', {'id': order.id}) }}" class="btn btn-primary">Download PDF</a>
        </div>
    </div>

    <div class="panel">
        <div class="panel-content">
            <div class="row">
                <div class="col-6">
                    <table class="table order-details">
                        <tr>
                            <td><strong>Order Date</strong></td>
                            <td>{{ order.orderDate|canary_datetime }}</td>
                        </tr>
                        <tr>
                            <td><strong>Customer</strong></td>
                            <td>
                                <a href="{{ path('app_cms_orders_customers_edit', {'id': order.customer.id}) }}">{{ order.customer.company }}</a>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Status</strong></td>
                            <td>{{ order.orderStatus|order_status }}</td>
                        </tr>
                    </table>
                </div>
                <div class="col-6">
                    <div class="order-block">
                        <div class="order-block-title">Shipping Address</div>
                        <div>
                            <strong>{{ order.company }}</strong><br>
                            Att: {{ order.firstName }} {{ order.lastName }}<br>
                            {{ order.address }}<br>
                            {{ order.suburb }}
                            {{ order.state }}
                            {{ order.postcode }}<br>
                            {{ order.country|canary_country }}<br>
                            Phone: {{ order.phoneNumber }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if order.purchaseOrderNumber or order.specialRequests %}
        <div class="panel">
            <div class="panel-content order-form">
                {% if order.purchaseOrderNumber %}
                    <div class="order-block">
                        <div class="order-block-title">Purchase Order Number</div>
                        <div>{{ order.purchaseOrderNumber }}</div>
                    </div>
                {% endif %}

                {% if order.specialRequests %}
                    <div class="order-block">
                        <div class="order-block-title">Special Requests</div>
                        <div>{{ order.specialRequests|nl2br }}</div>
                    </div>
                {% endif %}
            </div>
        </div>
    {% endif %}

    {% for item in shipments %}
        {% set table = item.table %}
        {% set shipment = item.shipment %}
        <div class="panel">
            <div class="panel-content">
                <div class="row">
                    <div class="col-6">
                        <table class="table shipment-details">
                            <tr>
                                <td><strong>Shipment Date</strong></td>
                                <td>{{ shipment.shipmentDate|canary_datetime }}</td>
                            </tr>
                            <tr>
                                <td><strong>Courier</strong></td>
                                <td>{{ shipment.courierName }}</td>
                            </tr>
                            <tr>
                                <td><strong>Consignment Number</strong></td>
                                <td>{{ shipment.consignmentNumber ?: '—' }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                {{ datatable(table) }}
                <form action="{{ path('app_cms_orders_remove_shipment', {'id': order.id}) }}" method="post" class="shipment-remove">
                    <input type="hidden" name="shipment_id" value="{{ shipment.id }}">
                    <button type="submit" class="btn btn-danger">Remove and Redo</button>
                </form>
            </div>
        </div>
    {% endfor %}

    {% if form.orderItems is not empty %}
        {% canary_form_theme form %}
        {% canary_datatable_theme pendingTable %}

        {{ form_start(form) }}
            <div class="panel">
                <div class="panel-content">
                    {{ datatable(pendingTable) }}
                </div>

                <div class="panel-content order-shipment-form">
                    <div class="row">
                        <div class="col-4">
                            {{ form_row(form.courier) }}
                            {{ form_errors(form.orderItems) }}
                        </div>
                        <div class="col-4">
                            {{ form_row(form.consignmentNumber) }}
                        </div>
                        <div class="col-4">
                            <button type="submit" class="btn btn-primary">Mark as shipped</button>
                        </div>
                    </div>
                </div>
            </div>
        {{ form_end(form) }}
    {% endif %}
{% endblock %}