<vn-crud-model
    vn-id="model" 
    auto-load="true"
    url="ClaimBeginnings"
    filter="$ctrl.filter"
    data="$ctrl.salesClaimed"
    on-data-change="$ctrl.calculateTotals()">
</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" 
        value="{{$ctrl.paidTotal | currency: 'EUR':2}}">
    </vn-label-value>
    <vn-label-value label="Total claimed" 
        value="{{$ctrl.claimedTotal | currency: 'EUR':2}}">
    </vn-label-value>
</vn-card>
<vn-data-viewer model="model">
    <vn-card>
    <vn-table model="model">
        <vn-thead>
            <vn-tr>
                <vn-th center expand>Landed</vn-th>
                <vn-th number>Quantity</vn-th>
                <vn-th>Claimed</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-th></vn-th>
            </vn-tr>
        </vn-thead>
        <vn-tbody>
            <vn-tr ng-repeat="saleClaimed in $ctrl.salesClaimed" vn-repeat-last>
                <vn-td center expand>{{::saleClaimed.sale.ticket.landed | date:'dd/MM/yyyy'}}</vn-td>
                <vn-td number>{{::saleClaimed.sale.quantity}}</vn-td>
                <vn-td>
                    <vn-input-number
                        min="0"
                        step="1"
                        disabled="!$ctrl.isRewritable"
                        ng-model="saleClaimed.quantity"
                        on-change="$ctrl.setClaimedQuantity(saleClaimed.id, saleClaimed.quantity)"
                        class="dense">
                    </vn-input-number>
                </vn-td>
                <vn-td expand title="{{::saleClaimed.sale.concept}}">
                    <span
                        ng-click="itemDescriptor.show($event, saleClaimed.sale.itemFk)"
                        class="link">
                        {{::saleClaimed.sale.concept}}
                    </span>
                </vn-td>
                <vn-td number>{{::saleClaimed.sale.price | currency: 'EUR':2}}</vn-td>
                <vn-td number>
                    <span ng-class="{'link': $ctrl.isRewritable && $ctrl.isClaimManager}"
                        translate-attr="{title: $ctrl.isRewritable && $ctrl.isClaimManager ? 'Edit discount' : ''}"
                        ng-click="$ctrl.showEditPopover($event, saleClaimed)">
                        {{saleClaimed.sale.discount}} %
                    </span>
                </vn-td>
                <vn-td number>
                    {{$ctrl.getSaleTotal(saleClaimed.sale) | currency: 'EUR':2}}
                </vn-td>
                <vn-td shrink>
                    <vn-icon-button
                        vn-tooltip="Remove sale"
                        ng-if ="$ctrl.isRewritable"
                        icon="delete"
                        ng-click="$ctrl.showDeleteConfirm($index)"
                        tabindex="-1">
                    </vn-icon-button>
                </vn-td>
            </vn-tr>
        </vn-tbody>
    </vn-table>
    </vn-card>
</vn-data-viewer>
<vn-button
    label="Next"
    class="next"
    ui-sref="claim.card.photos">
</vn-button>
<vn-float-button 
    icon="add"
    ng-if="$ctrl.isRewritable"
    ng-click="$ctrl.openAddSalesDialog()"   
    vn-tooltip="Add sale item" vn-bind="+" 
    fixed-bottom-right>
</vn-float-button>
<!-- Add Lines Dialog -->
<vn-dialog vn-id="add-sales" class="modal-form">
    <tpl-title>
        <span translate>Claimable sales from ticket</span> {{$ctrl.claim.ticketFk}}
    </tpl-title>
    <tpl-body>
        <vn-horizontal class="vn-pa-md">
            <vn-table>
                <vn-thead>
                    <vn-tr>
                        <vn-th number>Landed</vn-th>
                        <vn-th number>Quantity</vn-th>
                        <vn-th number>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"
                        ng-click="$ctrl.addClaimedSale($index)"
                        class="clickable">
                        <vn-td number>{{sale.landed | date: 'dd/MM/yyyy'}}</vn-td>
                        <vn-td number>{{sale.quantity}}</vn-td>
                        <vn-td expand title="{{::sale.concept}}">
                            <span
                                vn-click-stop="itemDescriptor.show($event, sale.itemFk)"
                                class="link">
                                {{sale.itemFk}} - {{sale.concept}}
                            </span>
                        </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) - ((sale.discount * (sale.quantity * sale.price))/100) | currency: 'EUR':2}}
                        </vn-td>
                    </vn-tr>
                </vn-tbody>
            </vn-table>
        </vn-horizontal>
    </tpl-body>
</vn-dialog>
<vn-item-descriptor-popover
    vn-id="item-descriptor"
    warehouse-fk="$ctrl.vnConfig.warehouseFk">
</vn-item-descriptor-popover>
<vn-popover 
    class="edit"
    vn-id="edit-popover"
    on-open="$ctrl.getSalespersonMana()"
    on-close="$ctrl.mana = null">
    <div class="discount-popover">
        <vn-spinner
            ng-if="$ctrl.mana == null"
            style="padding: 1em;"
            enable="true">
        </vn-spinner>
        <div ng-if="$ctrl.mana != null">
            <vn-horizontal class="header vn-pa-md">
                <h5>MANÁ: {{$ctrl.mana | currency: 'EUR':0}}</h5>
            </vn-horizontal>
            <div class="vn-pa-md">
                <vn-input-number
                    vn-focus
                    label="Discount"
                    ng-model="$ctrl.newDiscount"
                    type="text"
                    step="0.01"
                    on-change="$ctrl.updateDiscount()"
                    suffix="€">
                </vn-input-number>
                <div class="simulator">
                    <p class="simulatorTitle" translate>Total claimed price</p>
                    <p>{{$ctrl.newPrice | currency: 'EUR':2}}
                    </p>
                </div>
            </div>
        </div>
    </div>
</vn-popover>
<vn-confirm 
    vn-id="confirm"
    question="Delete sale from claim?"
    on-accept="$ctrl.deleteClaimedSale()">
</vn-confirm>