{% import 'OroUIBundle::macros.html.twig' as UI %}

{% macro renderCollection(collection, sale) %}
    {% import 'OroUIBundle::macros.html.twig' as UI %}

    {% set pos = [] %}
    {% set saleId = sale %}

    {% for element in collection %}
            {% set pos = pos|merge([element]) %}
    {% endfor %}

        {% for po in pos %}
        {% import 'OroUIBundle::macros.html.twig' as UI %}
            <div class="contact-collection-element list-item map-item">
                <div class="actions">
                    {{ UI.clientLink({
                        'dataUrl': path('sv_po_update', { 'id': po.id, 'saleId': saleId }),
                        'aCss': 'no-hash',
                        'class': 'btn item-edit-button',
                        'iCss': 'icon-edit hide-text',
                        'widget' : {
                            'type' : 'dialog',
                            'multiple' : false,
                            'options' : {
                                'alias': 'po-dialog',
                                'dialogOptions' : {
                                    'title' : 'Edit PO',
                                    'allowMaximize': true,
                                    'allowMinimize': true,
                                    'dblclick': 'maximize',
                                    'maximizedHeightDecreaseBy': 'minimize-bar',
                                    'width': 1000
                                }
                            }
                        },
                    }) }}
                    {{ UI.clientLink({
                        'dataUrl': path('sv_api_delete_po', {'id': po.id}) ,
                        'dataRedirect': path('svwd_sale_view', { 'id': saleId}),
                        'aCss': 'no-hash',
                        'class': 'item-remove-button',
                        'iCss': 'icon-trash hide-text',
                        'id': 'btn-remove-contact',
                        'dataId': po.id,
                        'entity_label': 'PO',
                    }) }}
                    
                </div>
                <div class="title-item" style="float:none!important"><h4>{{po.poNumber}}</h4></div>
                <ul class="unstyled">

                    <li><strong>PO#: </strong>{{ po.poNumber }}</li>
                    <li><strong>Vender: </strong>{{ po.vendor }}</li>
                    <li><strong>ETA: </strong>{{ po.deliveryEta|length ? po.deliveryEta|oro_format_date : '' }}</li>
              
                    <li><strong>Items: </strong>{{ po.itemsCount }}</li>
                    <li><strong>Amount: </strong>{{ po.orderAmount|length ? po.orderAmount|oro_format_currency : '' }}</li>
                    <li><strong>Desc: </strong>{{ po.description }}</li>
                    <li><strong>Last Modified: </strong>{{ po.updatedAt|length ? po.updatedAt|oro_format_date : ''}}</li>
                  
                </ul>
                    
                

            </div>
        {% endfor %}

{% endmacro %}

<div class="widget-content">
    {# JS template for address view #}
    {% include "OroAddressBundle:Js:address.js.twig" %}

    {# widget container and actions #}
    <div class="widget-actions">
        {{ UI.clientLink({
                        'dataUrl': path('sv_po_create', { 'saleId': entity.id }),
                        'aCss': 'no-hash',
                        'class': 'btn btn-mini btn-primary btn-uppercase',
                        'label': '+ Add PO',
                        'widget' : {
                            'type' : 'dialog',
                            'multiple' : false,
                            'options' : {
                                'alias': 'po-dialog',
                                'dialogOptions' : {
                                    'title' : 'Add PO',
                                    'allowMaximize': true,
                                    'allowMinimize': true,
                                    'dblclick': 'maximize',
                                    'maximizedHeightDecreaseBy': 'minimize-bar',
                                    'width': 1000
                                }
                            }
                        },
                    }) }}
    </div>
    <div class="list-box map-box">
        
        {{ entity.poNumbers.count ? _self.renderCollection(entity.poNumbers, entity.id) : null }}

    </div>



    
</div>

<script type="text/javascript">
require(['underscore', 'orotranslation/js/translator', 'oroui/js/widget-manager', 'oroui/js/messenger'],
function(_, __, widgetManager, messenger) {

    widgetManager.getWidgetInstanceByAlias('po-dialog', function(widget){
        widget.on('formSave', function(){
            widget.remove();
            widgetManager.getWidgetInstanceByAlias('po-widget', function(widget){
                widget.render();
            });
            messenger.notificationFlashMessage('success', __('Purchase Order Saved'));
        });
    });

    //addWidgetInstance.render();

    
});
</script>