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

{% block content %}
<div class="ecom__homepage-top-text">
    <div style="max-width: 700px; margin: 0 auto; padding: 40px 20px;">
        <h1 class="page__title page__title--h1 mb-4">{{ 'Avbeställ' | trans }}</h1>

        <div class="mb-4 p-3" style="background: #f8f8f8; border-radius: 4px;">
            <strong>{{ 'Order' | trans }}:</strong> {{ order.orderNr }}<br>
            <strong>{{ 'Datum' | trans }}:</strong> {{ order.dateCreated | date('Y-m-d') }}<br>
            <strong>{{ 'Kund' | trans }}:</strong> {{ order.customerName }}<br>
            <strong>{{ 'Totalt' | trans }}:</strong> {{ (order.totalSum + order.totalTax) | number_format(2, '.', ',') }} {{ 'kr' | trans }}
        </div>

        <p class="mb-3">{{ 'Välj de produkter och antal du vill avbeställa.' | trans }}</p>

        <form method="POST" action="{{ path('ecom_cancel_submit', {'channelEcomId': app.request.get('channelEcomId')}) }}">
            <input type="hidden" name="_token" value="{{ csrf_token('cancel_submit') }}">

            <table class="table mb-4">
                <thead>
                    <tr>
                        <th></th>
                        <th>{{ 'Produkt' | trans }}</th>
                        <th>{{ 'Storlek' | trans }}</th>
                        <th>{{ 'Antal' | trans }}</th>
                        <th>{{ 'Avbeställ antal' | trans }}</th>
                        <th>{{ 'Pris' | trans }}</th>
                    </tr>
                </thead>
                <tbody>
                {% for item in orderItems %}
                    <tr>
                        <td>
                            <input type="checkbox" name="selected_items[{{ item.id }}]" value="1"
                                   id="item_{{ item.id }}" class="cancel-checkbox"
                                   data-item-id="{{ item.id }}">
                        </td>
                        <td>
                            <label for="item_{{ item.id }}">
                                {% if item.productThumbnail %}
                                    <img src="{{ asset(item.productThumbnail) }}" alt="" style="width:40px;height:auto;margin-right:8px;">
                                {% endif %}
                                {{ item.productName }}<br>
                                <small class="text-muted">{{ item.productSku }}</small>
                            </label>
                        </td>
                        <td>{{ item.productSizeText }}</td>
                        <td>{{ item.quantity }}</td>
                        <td>
                            <input type="number" name="quantities[{{ item.id }}]"
                                   id="qty_{{ item.id }}"
                                   value="{{ item.quantity }}"
                                   min="1" max="{{ item.quantity }}"
                                   style="width:70px;"
                                   class="form-control form-control-sm">
                        </td>
                        <td>{{ item.price | number_format(2, '.', ',') }} {{ 'kr' | trans }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>

            <button type="submit" class="btn btn-danger">{{ 'Bekräfta avbeställning' | trans }}</button>
            <a href="{{ path('ecom_cancel', {'channelEcomId': app.request.get('channelEcomId')}) }}" class="btn btn-secondary ms-2">{{ 'Tillbaka' | trans }}</a>
        </form>
    </div>
</div>
{% endblock %}