<vn-crud-model auto-load="false"
    vn-id="model"
    url="claim/api/ClaimEnds"
    filter="$ctrl.filter"
    data="$ctrl.salesClaimed">
</vn-crud-model>
<vn-vertical compact>
    <vn-card pad-large>
        <vn-vertical>
            <vn-horizontal>
                <div class="totalBox" ng-show="$ctrl.salesClaimed.length > 0">
                    <vn-label-value label="Total claimed" 
                        value="{{$ctrl.claimedTotal | currency: 'EUR':2}}">
                    </vn-label-value>
                </div>
            </vn-horizontal>
            <vn-horizontal>
                <vn-tool-bar margin-medium-bottom>
                    <vn-button
                        label="Import claim" 
                        ng-click="$ctrl.importToNewRefundTicket()"
                        vn-tooltip="Imports claim details">
                    </vn-button>
                    <vn-button
                        label="Import ticket" 
                        ng-click="$ctrl.showLastTickets($event)"
                        vn-tooltip="Imports ticket lines">
                    </vn-button>
                    <vn-input-range
                        vn-one 
                        label="Responsability"
                        value="$ctrl.claim.responsibility"
                        max="5"
                        min="1"
                        step="1"
                        vn-acl="salesAssistant"
                        on-change="$ctrl.saveResponsibility(value)">
                    </vn-input-range>
                </vn-tool-bar>
            </vn-horizontal>
            <vn-table model="model">
                <vn-thead>
                    <vn-tr>
                        <vn-th number>Id</vn-th>
                        <vn-th>Destination</vn-th>
                        <vn-th>Landed</vn-th>
                        <vn-th number>Quantity</vn-th>
                        <vn-th>Description</vn-th>
                        <vn-th number>Price</vn-th>
                        <vn-th number>Disc.</vn-th>
                        <vn-th number>Total</vn-th>
                    </vn-tr>
                </vn-thead>
                <vn-tbody>
                    <vn-tr
                        ng-repeat="saleClaimed in $ctrl.salesClaimed"
                        vn-repeat-last on-last="$ctrl.focusLastInput()">
                        <vn-td number>
                                <span 
                                    ng-click="$ctrl.showDescriptor($event, saleClaimed.sale.itemFk)"
                                    class="link">
                                    {{saleClaimed.sale.itemFk | zeroFill:6}}
                                </span>
                        </vn-td>
                        <vn-td>
                            <vn-autocomplete
                                vn-one
                                id="claimDestinationFk"
                                field="saleClaimed.claimDestinationFk"
                                url="/claim/api/ClaimDestinations"
                                fields="['id','description']"
                                value-field="id"
                                show-field="description"
                                on-change="$ctrl.setClaimDestination(saleClaimed.id, value)">
                            </vn-autocomplete>
                        </vn-td>
                        <vn-td>{{saleClaimed.sale.ticket.landed | dateTime: 'dd/MM/yyyy'}}</vn-td>
                        <vn-td number>{{saleClaimed.sale.quantity}}</vn-td>
                        <vn-td expand>{{saleClaimed.sale.concept}}</vn-td>
                        <vn-td number>{{saleClaimed.sale.price | currency: 'EUR':2}}</vn-td>
                        <vn-td number>{{saleClaimed.sale.discount}} %</vn-td>
                        <vn-td number>
                            {{saleClaimed.sale.quantity * saleClaimed.sale.price *
                                ((100 - saleClaimed.sale.discount) / 100) | currency: 'EUR':2}}
                        </vn-td>
                        <vn-td shrink>
                            <vn-icon-button
                                vn-tooltip="Remove line"
                                icon="delete"
                                ng-click="$ctrl.deleteClaimedSale(saleClaimed.id)"
                                tabindex="-1">
                            </vn-icon-button>
                        </vn-td>
                    </vn-tr>
                </vn-tbody>
            </vn-table>
        </vn-vertical>
    </vn-card>
    <vn-button-bar>
        {{$ctrl.resolvedStateText}}
        <vn-button 
            label="Regularize" 
            ng-click="$ctrl.regularize()"
            disabled="$ctrl.claim.claimStateFk == $ctrl.resolvedState">
        </vn-button>
    </vn-button-bar>
    <!-- WIP
    <a ng-click="$ctrl.openAddSalesDialog()" vn-tooltip="New item" vn-bind="+" fixed-bottom-right>
        <vn-float-button icon="add"></vn-float-button>
    </a>
    -->

<!-- Add Lines Dialog -->
<vn-dialog vn-id="addSales">
    <tpl-body>
        <h3 translate>Claimable sales from ticket</h3><h3> {{$ctrl.claim.ticketFk}}</h3>
        <vn-table>
            <vn-thead>
                <vn-tr>
                    <vn-th number>Id</vn-th>
                    <vn-th>Landed</vn-th>
                    <vn-th number>Quantity</vn-th>
                    <vn-th>Description</vn-th>
                    <vn-th number>Price</vn-th>
                    <vn-th number>Disc.</vn-th>
                    <vn-th number>Total</vn-th>
                </vn-tr>
            </vn-thead>
            <vn-tbody>
                <vn-tr
                    ng-repeat="sale in $ctrl.salesToClaim"
                    class="clickable"
                    ng-click="$ctrl.addClaimedSale(sale.saleFk)">
                    <vn-td number>{{sale.saleFk}}</vn-td>
                    <vn-td>{{sale.landed | dateTime: 'dd/MM/yyyy'}}</vn-td>
                    <vn-td number>{{sale.quantity}}</vn-td>
                    <vn-td expand>{{sale.concept}}</vn-td>
                    <vn-td number>{{sale.price | currency: 'EUR':2}}</vn-td>
                    <vn-td number>{{sale.discount}} %</vn-td>
                    <vn-td number>
                        {{sale.quantity * sale.price * ((100 - sale.discount) * / 100) | currency: 'EUR':2}}
                    </vn-td>
                </vn-tr>
            </vn-tbody>
        </vn-table>
    </tpl-body>
</vn-dialog>
<vn-crud-model
    vn-id="lastTicketsModel"
    url="/claim/api/Tickets"
    limit="20"
    data="lastTickets" auto-load="false">
</vn-crud-model>
<!-- Transfer Popover -->
<vn-popover class="lastTicketsPopover" vn-id="lastTicketsPopover">
    <div class="ticketList" pad-medium>
        <vn-table model="lastTicketsModel" auto-load="false" class="vn-grid">
            <vn-thead>
                <vn-tr>
                    <vn-th field="id" number>ID</vn-th>
                    <vn-th field="shipped" default-order="DESC">F. envio</vn-th>
                    <vn-th>Agencia</vn-th>
                    <vn-th>Almacen</vn-th>
                </vn-tr>
            </vn-thead>
            <vn-tbody>
                <vn-tr 
                    class="clickable" 
                    ng-repeat="ticket in lastTickets"
                    ng-click="$ctrl.importTicketLines(ticket.id)">
                    <vn-td number>{{::ticket.id}}</vn-td>
                    <vn-td>{{::ticket.shipped | date: 'dd/MM/yyyy'}}</vn-td>
                    <vn-td>{{::ticket.agencyMode.name}}</vn-td>
                    <vn-td>{{::ticket.warehouse.name}}</vn-td>
                </vn-tr>
            </vn-tbody>
        </vn-table>
    </div>
</vn-popover>
<vn-item-descriptor-popover
    vn-id="descriptor"
    quicklinks="$ctrl.quicklinks">
</vn-item-descriptor-popover>