<vn-crud-model
    vn-id="model"
    url="/api/Tickets/{{$ctrl.$stateParams.id}}/getSales"
    filter="{}"
    data="sales" on-data-change="$ctrl.onDataChange()">
</vn-crud-model>

<vn-vertical>
    <vn-card pad-large>
        <vn-vertical>
            <vn-title>Sale</vn-title>
            <vn-tool-bar margin-medium-bottom>
                <vn-button 
                    disabled="!$ctrl.isEditable" 
                    label="Ok" 
                    ng-click="$ctrl.onStateOkClick()">
                </vn-button>
                <vn-icon-menu 
                    disabled="!$ctrl.isEditable"
                    label="State"
                    url="/ticket/api/States/alertLevelIs0"
                    on-change="$ctrl.onStateChange(value)">
                </vn-icon-menu>
                <vn-icon-menu
                    vn-id="more-button"
                    label="More"
                    show-filter="false"
                    value-field="callback"
                    translate-fields="['name']"
                    on-change="$ctrl.onMoreChange(value)"
                    on-open="$ctrl.onMoreOpen()">
                </vn-icon-menu>
                <vn-button 
                    disabled="!$ctrl.isChecked || !$ctrl.isEditable"
                    ng-click="$ctrl.showRemoveLinesDialog()" 
                    vn-tooltip="Remove lines" 
                    tooltip-position="up"
                    icon="delete">
                </vn-button>
                <vn-button 
                    disabled="!$ctrl.isChecked || !$ctrl.isEditable"
                    ng-click="$ctrl.showTransferPopover($event);" 
                    vn-tooltip="Transfer lines" 
                    tooltip-position="right"
                    icon="call_split">
                </vn-button>
            </vn-tool-bar>
            <vn-table model="model">
                <vn-thead>
                    <vn-tr>
                        <vn-th number>
                            <vn-multi-check 
                                data="$ctrl.sales"
                                disabled="!$ctrl.isEditable">
                            </vn-multi-check>
                        </vn-th>
                        <vn-th></vn-th>
                        <vn-th style="text-align: center">Item</vn-th>
                        <vn-th number>Id</vn-th>
                        <vn-th>Description</vn-th>
                        <vn-th number>Quantity</vn-th>
                        <vn-th number>Price</vn-th>
                        <vn-th number>Disc</vn-th>
                        <vn-th number>Amount</vn-th>
                    </vn-tr>
                </vn-thead>
                <vn-tbody>
                    <vn-tr ng-repeat="sale in sales">
                        <vn-td number>
                            <vn-check 
                                field="sale.checked"
                                disabled="!$ctrl.isEditable">
                            </vn-check>
                        </vn-td>
                        <vn-td>
                            <vn-icon 
                                ng-show="!sale.visible || !sale.available" 
                                orange
                                icon="warning"
                                vn-tooltip="Visible: {{::sale.visible || 0}} <br> {{::$ctrl.translate.instant('Available')}} {{::sale.available || 0}}">
                            </vn-icon>
                            <vn-icon ng-show="sale.reserved" icon="icon-reserved"></vn-icon>
                        </vn-td>
                        <vn-td style="text-align: center">
                            <img 
                                ng-src="//verdnatura.es/vn-image-data/catalog/50x50/{{::sale.image}}"
                                zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::sale.image}}"
                                on-error-src/>
                        </vn-td>
                        <vn-td ng-click="$ctrl.showDescriptor($event, sale.itemFk)"
                        pointer number class="link">
                            {{("000000"+sale.itemFk).slice(-6)}}
                        </vn-td>
                        <vn-td><vn-fetched-tags concept="sale.concept" tags="sale.item.tags"/></vn-td>
                        <vn-td ng-if="!$ctrl.isEditable" number>{{sale.quantity}}</vn-td>
                        <vn-td ng-if="$ctrl.isEditable" number>
                            <vn-textfield
                                model="sale.quantity"
                                accept="$ctrl.updateQuantity(sale.id, sale.quantity)"
                                type="text">
                            </vn-textfield>
                        </vn-td>
                        <vn-td number 
                            ng-if="$ctrl.isEditable"
                            class="link"
                            ng-click="$ctrl.showEditPricePopover($event, sale)"
                            pointer
                            vn-tooltip="Edit price">
                            {{sale.price | currency:'€':2}}
                        </vn-td>
                        <vn-td number ng-if="!$ctrl.isEditable">
                            {{sale.price | currency:'€':2}}
                        </vn-td>
                        <vn-td number 
                            ng-if="$ctrl.isEditable"
                            class="link"
                            ng-click="$ctrl.showEditPopover($event, sale)"
                            pointer
                            vn-tooltip="Edit discount">
                            {{sale.discount}} %
                        </vn-td>
                        <vn-td number 
                            ng-if="!$ctrl.isEditable">
                            {{sale.discount}} %
                        </vn-td>
                        <vn-td number>
                            {{(sale.quantity * sale.price) - 
                                ((sale.discount * (sale.quantity * sale.price))/100) | currency:' €':2
                            }}
                        </vn-td>
                    </vn-tr>
                </vn-tbody>
                <vn-empty-rows ng-if="model.data.length === 0" translate>
                    No results
                </vn-empty-rows>
                <vn-tfoot>
                    <vn-tr ng-if="model.data.length > 0">
                        <vn-td></vn-td>
                        <vn-td></vn-td>
                        <vn-td></vn-td>
                        <vn-td></vn-td>
                        <vn-td></vn-td>
                        <vn-td></vn-td>
                        <vn-td></vn-td>
                        <vn-td></vn-td>
                        <vn-td number>
                            <section>
                                <p>
                                    <vn-label translate>Subtotal</vn-label> 
                                    <span>{{$ctrl.subTotal | currency:' €':2}}</span>
                                </p>
                                <p>
                                    <vn-label translate>VAT</vn-label> 
                                    <span>{{$ctrl.VAT | currency:' €':2}}</span>
                                </p>
                                <p>
                                    <vn-label><strong>Total</strong></vn-label> 
                                    <strong>{{$ctrl.total | currency:' €':2}}</strong>
                                </p>
                            </section>
                        </vn-td>
                    </vn-tr>
                </vn-tfoot>
            </vn-table>
        </vn-vertical>
    </vn-card>
    <vn-item-descriptor-popover vn-id="descriptor">
    </vn-item-descriptor-popover>

    <!-- Create Ticket Dialog -->
<!--    <vn-ticket-create-dialog 
        vn-id="newTicket" 
        callback="$ctrl.moveLines(res)"
        ticket="$ctrl.ticket">
    </vn-ticket-create-dialog>
-->
    <!-- Add Turn Dialog -->
    <vn-dialog class="dialog-summary"
    vn-id="addTurn">
        <tpl-body>
            <div>
                <h5 style="text-align: center">
                    <span translate>In which day you want to add the ticket?</span>
                </h5>
                <vn-tool-bar margin-medium-top>
                    <vn-button
                        label="Monday" 
                        ng-click="$ctrl.addTurn(0)">
                    </vn-button>
                    <vn-button
                        label="Tuesday" 
                        ng-click="$ctrl.addTurn(1)">
                    </vn-button>
                    <vn-button
                        label="Wednesday" 
                        ng-click="$ctrl.addTurn(2)">
                    </vn-button>
                    <vn-button
                        label="Thursday" 
                        ng-click="$ctrl.addTurn(3)">
                    </vn-button>
                    <vn-button
                        label="Friday" 
                        ng-click="$ctrl.addTurn(4)">
                    </vn-button>
                    <vn-button
                        label="Saturday" 
                        ng-click="$ctrl.addTurn(5)">
                    </vn-button>
                    <vn-button
                        label="Sunday" 
                        ng-click="$ctrl.addTurn(6)">
                    </vn-button>
                </vn-tool-bar>
            </div>
        </tpl-body>
    </vn-dialog>

    <!-- Edit Price Popover -->
    <vn-popover 
        class="edit dialog-summary" 
        vn-id="editPricePopover"
        on-open="$ctrl.getManaSalespersonMana()">
        <vn-horizontal pad-medium class="header">
            <h5>MANÁ: {{$ctrl.mana | currency:' €':0}}</h5>
        </vn-horizontal>
        <div pad-medium>
            <vn-textfield
                label="Price"
                model="$ctrl.editedPrice"
                type="text"
                accept="$ctrl.updatePrice()">
                <t-right-icons>
                    <span class="filter">€</span>
                </t-right-icons>
            </vn-textfield>
            <div class="simulator">
                <p class="simulatorTitle" translate>New price</p>
                <p>{{($ctrl.sale.quantity * $ctrl.editedPrice) 
                    - (($ctrl.sale.discount * ($ctrl.sale.quantity * $ctrl.editedPrice))/100) 
                    | currency:' €':2}}</p>
            </div>
        </div>
    </vn-popover>

    <!-- Edit Popover -->
    <vn-popover 
        class="edit dialog-summary" 
        vn-id="editPopover"
        on-open="$ctrl.getManaSalespersonMana()">
            <vn-ticket-sale-edit-discount
                mana="$ctrl.mana"
                bulk="false"
                edit="$ctrl.edit"
                hide="$ctrl.hideEditPopover()">
            </vn-ticket-sale-edit-discount>
    </vn-popover>

    <!-- Edit Dialog -->
    <vn-dialog 
        vn-id="editDialog" 
        class="edit"
        on-open="$ctrl.getManaSalespersonMana()">
        <tpl-body>
            <vn-ticket-sale-edit-discount
                mana="$ctrl.mana"
                bulk="true"
                edit="$ctrl.edit"
                hide="$ctrl.hideEditDialog()">
            </vn-ticket-sale-edit-discount>
        </tpl-body>
    </vn-dialog>

    <!-- Transfer Popover -->
    <vn-popover class="transfer" vn-id="transfer">
        <div pad-medium>
            <table class="vn-grid">
                <thead>
                    <tr>
                        <th number translate>ID</th>
                        <th number translate>F. envio</th>
                        <th number translate>Agencia</th>
                        <th number translate>Almacen</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-if="$ctrl.lastThreeTickets.length === 0" ><td colspan="4" style="text-align: center" translate>No results</td></tr>
                    <tr 
                    class="clickable" 
                    ng-repeat="ticket in $ctrl.lastThreeTickets track by ticket.id"
                    ng-click="$ctrl.moveLines(ticket.id)">
                        <td number>{{::ticket.id}}</td>
                        <td number>{{::ticket.shipped | date: 'dd/MM/yyyy HH:mm'}}</td>
                        <td number>{{::ticket.agencyName}}</td>
                        <td number>{{::ticket.warehouseName}}</td>
                    </tr>
                </tbody>
            </table>
            <vn-horizontal>
                <vn-textfield
                    label="Move to ticket"
                    model="$ctrl.moveToTicketFk"
                    type="number">
                </vn-textfield>
                <vn-icon-button
                    pointer
                    icon="arrow_forward_ios"
                    ng-click="$ctrl.moveLines($ctrl.moveToTicketFk)">
                </vn-icon-button>
            </vn-horizontal>
            <vn-horizontal>
                <vn-button
                    pointer
                    label="New ticket"
                    ng-click="$ctrl.linesToNewTicket()">
                </vn-button>
                <vn-icon 
                    medium-grey
                    vn-tooltip="You have to allow pop-ups in your web browser to use this functionality"
                    icon="info">
                </vn-icon>
            </vn-horizontal>
        </div>
    </vn-popover>
</vn-vertical>
<vn-confirm
    vn-id="deleteConfirmation"
    on-response="$ctrl.returnDeleteTicketDialog(response)"
    question="You are going to delete this ticket"
    message="Continue anyway?">
</vn-confirm>
<vn-confirm 
    vn-id="delete-lines"
    question="You are going to delete lines of the ticket"
    message="Continue anyway?"
    on-response="$ctrl.onRemoveLinesClick(response)">
</vn-confirm>