{% trans_default_domain 'lcshop' %}



{% macro tableHead() %}
<table id="order-products-list" class="table table-striped">
    <thead>
    <tr>
        <th :class="editionMode ? '' : 'hidden'">

        </th>
        <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>
        <th :class="editionMode ? '' : 'hidden'">
            Actions
        </th>
    </tr>
    </thead>
    {% endmacro %}


    {% macro 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=null) %}
        <tr :class=" orderProduct.isRedelivery ? 'redelivery order-product-item' : 'order-product-item'">
            <td :class="editionMode ? '' : 'hidden'">
                <input  type="checkbox" :value="orderProduct.id" class="order-product-checkbox" />
            </td>
            <td colspan="2">
                {% verbatim %}{{orderProduct.title}}{% endverbatim %}
                <span v-show="orderProduct.hasRedelivery">
                 - <i class="fa fa-undo" data-toggle="tooltip" :title="orderProduct.redeliveryOrderShop" ></i>
                </span>

                <span v-show="orderProduct.isRedelivery">
                 - <i class="fa fa-undo" data-toggle="tooltip" title="Ce produit fait l'objet d'une relivraison" ></i>
                </span>

            </td>
            <td>
                {% verbatim %}{{orderProduct.price}}{% endverbatim %}€
            </td>
            <td>
                {% verbatim %}{{orderProduct.priceWithTax}}{% endverbatim %}€
            </td>
            <td>
                {% verbatim %}{{orderProduct.availableQuantity}}{% endverbatim %}
            </td>
            <td>
                {% if form_order_products is not null %}
                    <div :class="editionMode && orderProduct.isRedelivery ==false ? '' : '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 && orderProduct.isRedelivery ==false ? 'hidden' : ''">
                        {% verbatim %}{{ orderProduct.quantityOrder }}{% endverbatim %}
                    </div>
                {% else %}
                    {% verbatim %}{{ orderProduct.quantityOrder }}{% endverbatim %}
                {% endif %}
            </td>
            <td>
                {% verbatim %}{{orderProduct.totalWithTaxAndReduction}}{% endverbatim %}€
            </td>
            <td :class="editionMode ? '' : 'hidden'">
                <div class="dropdown"  :class="editionMode ? '' : 'hidden'">
                    <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-expanded="false">
                        Actions
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenu">
                        <button v-show="orderProduct.hasRedelivery == false"type="button" class="dropdown-item" @click="modalAddRedeliveryOrderProduct">
                            Relivraison
                        </button>

                        <button type="button" class="dropdown-item" >
                            Avoirs groupé
                        </button>
                    </div>
                </div>
            </td>
        </tr>

    {% endmacro %}

    {% macro tableTotal() %}

</table>
    <div class="col-12">
          <button type="button" class="dropdown-item" >
                    Avoirs groupé
          </button>
    </div>
    <div class="clearfix"></div>

    <div class="row">
        <div class="col-6">
            <div class="row">
                <div class="col-12">
                    {{ _self.order_modal_button('#modal-add-product-to-order', 'btn-success',  "action.order.addOrderProduct", 'plus') }}
                    {{ _self.order_modal_button('#modal-add-reduction-cart', 'btn-warning',  "action.order.addReductionCart", 'shopping-basket') }}
                    {{ _self.order_modal_button('#modal-add-reduction-credit', 'btn-warning',  "action.order.addReductionCredit", 'backspace') }}

                </div>
                <div class="col-12" style="margin-top: 25px;">
                    <h6><strong>Historiques des transactions</strong></h6>
                    {#TODO: afficher si la commande est règlé et afficher une alerte si le montant des paiments est supérieur au montant total de la commande#}
                    <table class="table table-striped">
                        <tbody>
                        <thead>
                        <tr>
                            <th>Mode de règlement</th>
                            <th>Date</th>
                            <th>Montant</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        <template v-for="(orderPayment, i) in order.orderPayments">
                            <tr>
                                <td>${orderPayment.meanPaymentText}</td>
                                <td>${orderPayment.paidAtText}</td>
                                <td>${orderPayment.amount}</td>
                                <td>
                                    <button v-show="orderPayment.editable && editionMode && modalExist('#modal-delete-order-payment')" class="btn-sm btn-info" type="button" @click="editOrderPayment(orderPayment.id)">
                                        <i class="fa fa-pen"></i>
                                    </button>
                                    <button v-show="orderPayment.editable && editionMode && modalExist('#modal-delete-order-payment')"
                                            type="button" class="btn-sm btn-danger"
                                            @click="modalDeleteOrderPayment(orderPayment.id)">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </template>
                        </tbody>
                    </table>
                    {{ _self.order_modal_button('#modal-order-payment', 'btn-info',  "action.order.addOrderPayment") }}
                </div>

                <div class="col-8">

                    <div v-show="order.isOrderPaid" class="alert alert-success alert-dismissible">
                        <h5><i class="icon fas fa-check"></i> Commande soldé</h5>
                    </div>
                    <div v-show="order.isOrderPaid==false" class="alert alert-danger alert-dismissible">
                        <h5><i class="icon fas fa-check"></i> Commande non soldé</h5>
                    </div>
                </div>
                <div class="col-4">
                    <span class="float-right">Total : ${order.totalOrderPaid}</span>
                </div>
            </div>
        </div>
        <div class="col"></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 && modalExist('#modal-delete-reduction-cart')" type="button"
                                        class="btn-sm btn-danger"
                                        @click="modalDeleteOrderReductionCart(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 && modalExist('#modal-delete-reduction-credit')"
                                        type="button" class="btn-sm btn-danger"
                                        @click="modalDeleteOrderReductionCredit(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>
                {{ _self.order_modal_button('#modal-order-status') }}
            </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>
                {{ _self.order_modal_button('#modal-order-invoice-address') }}
            </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>
                {{ _self.order_modal_button('#modal-order-delivery-address') }}
            </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>
                {{ _self.order_modal_button('#modal-order-delivery-availability') }}
            </div>
        </div>
    </div>
{% endmacro addressInfo %}



{% macro order_modal_button(modalId, class="btn-default",  trad="action.edit", icon=false) %}

    <button v-show="editionMode && modalExist('{{ modalId }}')" type="button" class="btn {{ class }}"
            data-toggle="modal"
            data-target="{{ modalId }}">
        {% if icon %}
            <i class="fa fa-{{ icon }}"></i>
        {% endif %}
        {{ trad|trans }}
    </button>

{% endmacro order_modal_button %}