<vn-crud-model vn-id="model"
    url="ClaimEnds"
    filter="$ctrl.filter"
    link="{claimFk: $ctrl.$params.id}"
    data="$ctrl.salesClaimed"
    auto-load="true" 
    auto-save="true"
    on-save="$ctrl.onSave()">
</vn-crud-model>
<vn-crud-model 
    auto-load="true"
    url="ClaimDestinations"
    data="claimDestinations">
</vn-crud-model>
<vn-card class="vn-mb-md vn-pa-lg vn-w-lg" style="text-align: right" 
    ng-if="$ctrl.salesClaimed.length > 0">
    <vn-label-value label="Total claimed" 
        value="{{$ctrl.claimedTotal | currency: 'EUR':2}}">
    </vn-label-value>
</vn-card>
<vn-card class="vn-pa-lg vn-w-lg">
    <section class="header">
        <vn-tool-bar class="vn-mb-md">
            <vn-button
                label="Import claim" 
                disabled="$ctrl.claim.claimStateFk == $ctrl.resolvedStateId"
                vn-http-click="$ctrl.importToNewRefundTicket()"p
                translate-attr="{title: 'Imports claim details'}">
            </vn-button>
            <vn-button
                label="Import ticket" 
                disabled="$ctrl.claim.claimStateFk == $ctrl.resolvedStateId"
                ng-click="$ctrl.showLastTickets($event)"
                translate-attr="{title: 'Imports ticket lines'}">
            </vn-button>
            <vn-range
                label="Responsability"
                min-label="Company"
                max-label="Sales/Client"
                ng-model="$ctrl.claim.responsibility"
                max="$ctrl.maxResponsibility"
                min="1"
                step="1"
                on-change="$ctrl.save({responsibility: value})">
            </vn-range>
        </vn-tool-bar>
        <vn-check vn-one
            label="Is paid with mana"
            ng-model="$ctrl.claim.isChargedToMana"
            on-change="$ctrl.save({isChargedToMana: value})">
        </vn-check>
    </section>
    <vn-data-viewer model="model">
        <vn-table model="model">
            <vn-thead>
                <vn-tr>
                    <vn-th number>Id</vn-th>
                    <vn-th number>Ticket</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="descriptor.show($event, saleClaimed.sale.itemFk)"
                                class="link">
                                {{::saleClaimed.sale.itemFk | zeroFill:6}}
                            </span>
                    </vn-td>
                    <vn-td number>
                        <span
                            class="link" 
                            ng-click="ticketDescriptor.show($event, saleClaimed.sale.ticketFk)">
                            {{::saleClaimed.sale.ticketFk}}
                        </span>
                    </vn-td>
                    <vn-td expand>
                        <vn-autocomplete vn-one id="claimDestinationFk"
                            ng-model="saleClaimed.claimDestinationFk"
                            data="claimDestinations"
                            fields="['id','description']"
                            value-field="id"
                            show-field="description">
                        </vn-autocomplete>
                    </vn-td>
                    <vn-td>{{::saleClaimed.sale.ticket.landed | date: '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="model.remove($index)"
                            tabindex="-1">
                        </vn-icon-button>
                    </vn-td>
                </vn-tr>
            </vn-tbody>
        </vn-table>
    </vn-data-viewer>
    <vn-button-bar>
        <vn-button 
            label="Regularize" 
            disabled="$ctrl.claim.claimStateFk == $ctrl.resolvedStateId"
            vn-http-click="$ctrl.regularize()">
        </vn-button>
    </vn-button-bar>
</vn-card>
<vn-crud-model
    vn-id="lastTicketsModel"
    url="Tickets"
    limit="20"
    data="lastTickets" auto-load="false">
</vn-crud-model>
<!-- Transfer Popover -->
<vn-popover class="lastTicketsPopover" vn-id="lastTicketsPopover">
    <div class="ticketList vn-pa-md">
        <vn-table model="lastTicketsModel" auto-load="false">
            <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">
</vn-item-descriptor-popover>
<vn-ticket-descriptor-popover 
    vn-id="ticketDescriptor">
</vn-ticket-descriptor-popover>
<vn-confirm 
    vn-id="update-greuge" 
    question="Insert greuges on client card"
    message="Do you want to insert greuges?"
    on-accept="$ctrl.onUpdateGreugeAccept()">
</vn-confirm>