{% trans_default_domain 'lcshop' %}
{% macro tableHead() %}
<table id="order-products-list" class="table table-striped">
    <thead>
    <tr>
        <th colspan="2">
            <span>Produits / Producteurs</span>
        </th>
        <th>
            <span>Prix HT à l'unité</span>
        </th>
        <th>
            <span>Prix TTC à l'unité </span>
        </th>
        <th>
            <span>Disponibilité</span>
        </th>
        <th>
            <span>Quantité</span>
        </th>
        <th>
            <span>Total</span>
        </th>
    </tr>
    </thead>
    {% endmacro %}


    {% macro products(form_order_products) %}
        <tbody>
        <template v-for="(orderProduct, key) in orderProducts">
            <order-product ref="orderProductBLOP" :order-product="orderProduct" :edition-mode="editionMode"
                           :template="templateTest"
                           :key-item="key"></order-product>
        </template>
        </tbody>
    {% endmacro %}


    {% macro productsTemplate(form_order_products) %}
        <tr class="order-product-item">
            <td colspan="2">{% verbatim %}{{orderProduct.title}}{% endverbatim %}</td>
            <td>
                {% verbatim %}{{orderProduct.price}}{% endverbatim %}€
            </td>
            <td>
                {% verbatim %}{{orderProduct.priceWithTax}}{% endverbatim %}€
            </td>
            <td>
                {% verbatim %}{{orderProduct.availableQuantity}}{% endverbatim %}
            </td>
            <td>
                <div :class="editionMode ? '' : 'hidden'">
                    {{ form_widget(form_order_products.orderProducts.vars.prototype.quantityOrder, {'attr' : {'ref': 'fieldQuantity', 'v-model' : 'orderProduct.quantityOrder', '@change' : 'updateOrderProducts'}}) }}
                    {{ form_widget(form_order_products.orderProducts.vars.prototype.product, {'attr' : {'ref' : 'fieldProduct', 'v-model' : 'orderProduct.product'}}) }}
                    {#{{ form_widget(form_order_products.orderProducts.vars.prototype.id, {'attr' : {'ref' : 'fieldId', 'v-model' : 'orderProduct.id'}}) }}#}
                    <button type="button" class="btn-remove-product btn btn-default" @click="deleteOrderProduct()">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
                <div :class="editionMode ? 'hidden' : ''">
                    {% verbatim %}{{ orderProduct.quantityOrder }}{% endverbatim %}
                </div>
            </td>
            <td>
                {% verbatim %}{{orderProduct.totalWithTaxAndReduction}}{% endverbatim %}€
            </td>
        </tr>

    {% endmacro %}

    {% macro tableTotal() %}

</table>

    <div class="clearfix"></div>

    <div class="row">
        <div class="col-7">
            <button v-show="editionMode" type="button" class="btn btn-success" data-toggle="modal"
                    data-target="#modal-add-product-to-order">
                <i class="fa fa-plus"></i> {{ "action.order.addOrderProduct"|trans }}
            </button>
            <button v-show="editionMode" type="button" class="btn btn-warning" data-toggle="modal"
                    data-target="#modal-add-reduction-cart">
                <i class="fa fa-shopping-basket"></i> {{ "action.order.addReductionCart"|trans }}
            </button>
            <button v-show="editionMode" type="button" class="btn btn-warning" data-toggle="modal"
                    data-target="#modal-add-reduction-credit">
                <i class="fa fa-backspace"></i> {{ "action.order.addReductionCredit"|trans }}
            </button>
        </div>
        <div class="col-5">
            <div class="table-responsive">
                <table class="table">
                    <tbody>
                    <tr>
                        <th>Total produits TTC</th>
                        <td>${order.totalOrderProductsWithTax}€</td>
                    </tr>
                    <template v-for="(orderReductionCart, key) in order.orderReductionCarts">
                        <tr>
                            <th>
                                ${orderReductionCart.title}
                                <button v-show="editionMode" type="button" class="btn-sm btn-danger"
                                        @click="modalOrderReductionCart(orderReductionCart.id)">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </th>
                            <td>${orderReductionCart.amount}€</td>
                        </tr>
                    </template>
                    <template v-for="(orderReductionCredit, key) in order.orderReductionCredits">
                        <tr>
                            <th>${orderReductionCredit.title}

                                <button v-show="editionMode" type="button" class="btn-sm btn-danger"
                                        @click="modalOrderReductionCredit(orderReductionCredit.id)">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </th>
                            <td>${orderReductionCredit.amount}€</td>
                        </tr>
                    </template>
                    <tr>
                        <th>Total produits après réductions TTC</th>
                        <td>${order.totalOrderProductsWithTaxAndReductions}€</td>
                    </tr>

                    <tr>
                        <th>Frais de livraisons TTC</th>
                        <td>${order.deliveryPriceWithTaxAndReduction}€</td>
                    </tr>

                    {# <tr>
                         <th>Total Taxes </th>
                         <td>${order.totalWithTax}€</td>
                     </tr>
 #}
                    <tr>
                        <th>Total TTC</th>
                        <td>${order.totalWithTax}€</td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-12">
            <button v-show="order.user" type="button" class="btn btn-danger" @click="switchEditionMode">
                <template v-if="editionMode">
                    <i class="fa fa-eye"></i> {{ "action.order.viewMode"|trans }}
                </template>
                <template v-else>
                    <i class="fa fa-pen"></i> {{ "action.order.editionMode"|trans }}
                </template>
            </button>
            <button v-show="editionMode" type="button" class="btn btn-info float-right">
                <i class="fa fa-credit-card"></i> Envoyer le lien de paiement
            </button>
        </div>
    </div>
{% endmacro %}

{% macro mainInfo() %}
    {#${order.id}#}
    <div class="col-3">
        <div class="info-box">
            <span class="info-box-icon bg-info">
            <i class="far fa-user"></i></span>

            <div class="info-box-content">
                <span class="info-box-text">{{ "field.default.user"|trans({}, 'lcshop') }}</span>
                <strong v-if="order.user" v-html="order.user"></strong>
                <strong v-else v-html="order.visitor"></strong>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="info-box">
            <span class="info-box-icon bg-success">
            <i class="far fa-calendar"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">{{ "field.default.date"|trans({}, 'lcshop') }}</span>
                <span class="info-box-number" v-if="order.createdAt"> ${order.createdAt}</span>
                <span class="info-box-number" v-else> ${order.createdAt}</span>
            </div>
        </div>
    </div>

    <div class="col-3">
        <div class="info-box">
            <span class="info-box-icon bg-warning">
            <i class="fa fa-euro-sign"></i></span>

            <div class="info-box-content">
                <span class="info-box-text">{{ "field.OrderShop.total"|trans({}, 'lcshop') }}</span>
                <strong> ${order.totalWithTax} €</strong>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="info-box">
            <span class="info-box-icon bg-danger">
            <i class="fa fa-info"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">{{ "field.OrderShop.status"|trans({}, 'lcshop') }}</span>
                <strong> ${order.orderStatus}</strong>
                <button v-show="editionMode" type="button" class="btn btn-default" data-toggle="modal"
                        data-target="#modal-order-status">
                    {{ "action.edit"|trans }}
                </button>
            </div>
        </div>
    </div>

    {#
        <div class="col-3">
            <strong>{{ "field.OrderShop.status"|trans }} </strong><br/>
            <span>${order.orderStatus}</span>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-order-status">
                {{ "action.edit"|trans }}
            </button>
        </div>#}

{% endmacro mainInfo %}

{% macro addressInfo() %}
    <div class="col-4">

        <div class="info-box">
            <span class="info-box-icon bg-info">
            <i class="fa fa-address-card"></i></span>
            <div class="info-box-content">
                <strong>{{ "field.default.invoiceAddress"|trans({}, 'lcshop') }}</strong>
                <address v-html="order.invoiceAddress">
                </address>
                <button v-show="editionMode" type="button" class="btn btn-default" data-toggle="modal"
                        data-target="#modal-order-invoice-address">
                    {{ "action.edit"|trans }}
                </button>
            </div>
        </div>
    </div>

    <div class="col-4">

        <div class="info-box">
            <span class="info-box-icon bg-success">
            <i class="fa fa-map-marked-alt"></i></span>
            <div class="info-box-content">

                <div v-if="order.deliveryType == 'home'">
                    <strong>{{ "field.default.deliveryAddress"|trans({}, 'lcshop') }}</strong>
                    <address v-html="order.deliveryAddress">
                    </address>
                </div>
                <div v-else-if="order.deliveryType == 'point-sale'">
                    <h6><strong>{{ "field.default.deliveryPointSale"|trans({}, 'lcshop') }} : </strong></h6>
                    <address v-html="order.deliveryPointSale">
                    </address>
                </div>
                <div v-else>
                    Aucun lieu de livraison défini.
                </div>
                <button v-show="editionMode" type="button" class="btn btn-default" data-toggle="modal"
                        data-target="#modal-order-delivery-address">
                    {{ "action.edit"|trans }}
                </button>
            </div>
        </div>
    </div>

    <div class="col-4">

        <div class="info-box">
            <span class="info-box-icon bg-danger">
            <i class="fa fa-clock"></i></span>
            <div class="info-box-content">

                <h6><strong>{{ "field.default.deliveryAvailabilty"|trans({}, 'lcshop') }} : </strong></h6>
                <div v-if="order.deliveryType == 'home'">
                    <div v-html="order.deliveryAvailabilityZone">
                    </div>
                </div>
                <div v-else-if="order.deliveryType == 'point-sale'">
                    <div v-html="order.deliveryAvailabilityPointSale">
                    </div>
                </div>
                <button v-show="editionMode" type="button" class="btn btn-default" data-toggle="modal"
                        data-target="#modal-order-delivery-availability">
                    {{ "action.edit"|trans }}
                </button>
            </div>
        </div>
    </div>
{% endmacro addressInfo %}