{% extends '@LcShop/backend/default/show.html.twig' %}

{% import '@LcShop/backend/default/block/macros.html.twig' as macros %}
                {% import '@LcShop/backend/order/macros.html.twig' as orderMacros %}

{% block main %}
    {% form_theme form_order_reduction_cart '@LcShop/backend/form/custom_bootstrap_4.html.twig' %}
    {% form_theme form_add_product_to_order '@LcShop/backend/form/custom_bootstrap_4.html.twig' %}
    {% form_theme form_order_reduction_credit '@LcShop/backend/form/custom_bootstrap_4.html.twig' %}
    <div class="lc-vue-js-container" id="lc-order-edit">


        <div class="row">

            {{ orderMacros.mainInfo() }}

            <template v-if="order.user">
                {{ orderMacros.addressInfo() }}
            </template>
            {{ macros.startCard(12, 'OrderShop.resume') }}



            {% include '@LcShop/backend/order/form/card_orderproducts.html.twig' %}


            {#
                            {{ macros.startCard(0, 'OrderShop.orderReductionCredit', 'success') }}
                            {{ form_start(form_order_reduction_credit, {'attr': { 'id' : 'orderReductionCredit'}}) }}
                            {{ form_end(form_order_reduction_credit) }}
                            {{ macros.endCard }}#}

            {#                {% include '@LcShop/backend/order/form/modal_reductioncart.html.twig' %}#}


            {{ macros.cardOverlay('isLoading') }}
            <div class="col-6">
                <h6><strong>Historiques des paiments</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#}{##}{##}
                ${order.orderPaid}
                <ul v-for="(orderPayment, i) in order.orderPayments">
                    <li>${orderPayment}</li>
                </ul>
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-order-payment">
                    {{ "action.addOrderPayment"|trans }}
                </button>
            </div>
            {{ macros.endCard() }}


            {% include '@LcShop/backend/order/form/modal_invoiceaddress.html.twig' %}
            {% include '@LcShop/backend/order/form/modal_deliveryaddress.html.twig' %}
            {% include '@LcShop/backend/order/form/modal_deliveryavailability.html.twig' %}
            {% include '@LcShop/backend/order/form/modal_orderstatus.html.twig' %}
            {% include '@LcShop/backend/order/form/modal_reductioncredit.html.twig' %}
            {% include '@LcShop/backend/order/form/modal_reductioncart.html.twig' %}
            {% include '@LcShop/backend/order/form/modal_addproducttoorder.html.twig' %}

            {#       {{ macros.startCard(3, 'OrderShop.addProduct', 'success') }}
                   {% include '@LcShop/backend/order/form/addproducttoorder.html.twig' %}
                   {{ macros.endCard(3) }}

                   {{ macros.startCard(0, 'OrderShop.orderReductionCart', 'success') }}
                   {{ form_start(form_order_reduction_cart, {'attr': { 'id' : 'orderReductionCartForm'}}) }}
                   {{ form_end(form_order_reduction_credit) }}
                   {{ macros.endCard(3) }}#}
        </div>
    </div>
{% endblock %}

{% block script_javascript %}
    {{ parent() }}
    {% include '@LcShop/backend/default/block/script-vuejs.html.twig' %}
    <script src="{{ asset('bundles/lcshop/js/backend/script/order/vuejs-order.js') }}"></script>
{% endblock %}