<vn-crud-model
    vn-id="model"
    url="SaleTrackings/{{$ctrl.$params.id}}/filter"
    limit="20"
    data="$ctrl.sales"
    order="concept ASC, quantity DESC"
    auto-load="true">
</vn-crud-model>
<vn-crud-model
    url="Shelvings"
    data="shelvings"
    auto-load="true">
</vn-crud-model>
<vn-crud-model
    url="Parkings"
    data="parkings"
    auto-load="true">
</vn-crud-model>
<vn-data-viewer model="model">
    <vn-card class="vn-w-lg">
    <vn-table model="model">
        <vn-thead>
            <vn-tr>
                <vn-th field="isChecked" center expand>Is checked</vn-th>
                <vn-th field="itemFk" number>Item</vn-th>
                <vn-th field="concept">Description</vn-th>
                <vn-th field="quantity" number>Quantity</vn-th>
                <vn-th field="parking" center>Parking</vn-th>
                <vn-th></vn-th>
            </vn-tr>
        </vn-thead>
        <vn-tbody>
            <vn-tr ng-repeat="sale in $ctrl.sales">
                <vn-td center expand>
                    <vn-chip
                        ng-class="{
                            'pink': sale.hasSaleGroupDetail,
                            'none': !sale.hasSaleGroupDetail,
                        }"
                        class="circleState"
                        vn-tooltip="sale group detail"
                        vn-click-stop="$ctrl.clickSaleGroupDetail($index)">
                    </vn-chip>
                    <vn-chip
                        ng-class="{
                            'notice': sale.isPreviousSelected,
                            'none': !sale.isPreviousSelected,
                        }"
                        class="circleState"
                        vn-tooltip="previous selected"
                        vn-click-stop="$ctrl.clickPreviousSelected($index)">
                    </vn-chip>
                    <vn-chip
                        ng-class="{
                            'dark-notice': sale.isPrevious,
                            'none': !sale.isPrevious,
                        }"
                        class="circleState"
                        vn-tooltip="previous"
                        vn-click-stop="$ctrl.clickPrevious($index)">
                    </vn-chip>
                    <vn-chip
                        ng-class="{
                            'warning': sale.isPrepared,
                            'none': !sale.isPrepared,
                        }"
                        class="circleState"
                        vn-tooltip="prepared"
                        vn-click-stop="$ctrl.clickPrepared($index)">
                    </vn-chip>
                    <vn-chip
                        ng-class="{
                            'yellow': sale.isControled,
                            'none': !sale.isControled,
                        }"
                        class="circleState"
                        vn-tooltip="checked"
                        vn-click-stop="$ctrl.clickControled($index)">
                    </vn-chip>
                </vn-td>
                <vn-td number>
                        <span
                        ng-click="itemDescriptor.show($event, sale.itemFk)"
                        class="link">
                        {{::sale.itemFk}}
                    </span>
                    </vn-td>
                <vn-td vn-fetched-tags>
                    <div>
                        <vn-one title="{{::sale.concept}}">{{::sale.concept}}</vn-one>
                        <vn-one ng-if="::sale.subName">
                            <h3 title="{{::sale.subName}}">{{::sale.subName}}</h3>
                        </vn-one>
                    </div>
                    <vn-fetched-tags
                        max-length="6"
                        item="::sale"
                        tabindex="-1">
                    </vn-fetched-tags>
                </vn-td>
                <vn-td number>{{::sale.quantity}}</vn-td>
                <vn-td center>{{::sale.parkingCode | dashIfEmpty}}</vn-td>
                <vn-td actions>
                    <vn-icon-button
                        vn-click-stop="$ctrl.showSaleTracking(sale)"
                        vn-tooltip="Log states"
                        icon="history">
                    </vn-icon-button>
                    <vn-icon-button
                        vn-click-stop="$ctrl.showItemShelvingSale(sale)"
                        vn-tooltip="Shelvings sale"
                        icon="icon-inventory">
                    </vn-icon-button>
                </vn-td>
            </vn-tr>
        </vn-tbody>
    </vn-table>
    </vn-card>
</vn-data-viewer>
<vn-item-descriptor-popover
    vn-id="item-descriptor"
    warehouse-fk="$ctrl.ticket.warehouseFk"
    ticket-fk="$ctrl.ticket.id">
</vn-item-descriptor-popover>

<vn-popup vn-id="saleTracking">
    <vn-crud-model
        vn-id="modelSaleTracking"
        url="SaleTrackings/listSaleTracking"
        link="{saleFk: $ctrl.saleId}"
        limit="20"
        data="saleTrackings"
        order="itemFk DESC"
        auto-load="true">
    </vn-crud-model>
    <vn-data-viewer model="modelSaleTracking">
        <vn-card class="vn-w-lg">
        <vn-table model="modelSaleTracking">
            <vn-thead>
                <vn-tr>
                    <vn-th field="quantity" number>Quantity</vn-th>
                    <vn-th field="originalQuantity" number>Original</vn-th>
                    <vn-th field="workerFk">Worker</vn-th>
                    <vn-th field="state" shrink>State</vn-th>
                    <vn-th field="created" expand>Created</vn-th>
                </vn-tr>
            </vn-thead>
            <vn-tbody>
                <vn-tr ng-repeat="saleTracking in saleTrackings">
                    <vn-td number>{{::saleTracking.quantity}}</vn-td>
                    <vn-td number>{{::saleTracking.originalQuantity}}</vn-td>
                    <vn-td expand>
                        <span
                            class="link"
                            ng-click="workerDescriptor.show($event, saleTracking.workerFk)">
                            {{::saleTracking.name | dashIfEmpty}}
                        </span>
                    </vn-td>
                    <vn-td shrink>{{::saleTracking.state}}</vn-td>
                    <vn-td expand>{{::saleTracking.created | date: 'dd/MM/yyyy HH:mm'}}</vn-td>
                </vn-tr>
            </vn-tbody>
        </vn-table>
        </vn-card>
    </vn-data-viewer>
    <vn-worker-descriptor-popover
        vn-id="worker-descriptor">
    </vn-worker-descriptor-popover>
</vn-popup>

<vn-popup vn-id="itemShelvingSale">
    <vn-crud-model
        vn-id="modelItemShelvingSale"
        url="ItemShelvingSales/filter"
        link="{saleFk: $ctrl.saleId}"
        limit="20"
        data="$ctrl.itemShelvingSales"
        auto-load="true">
    </vn-crud-model>
    <vn-data-viewer model="modelItemShelvingSale" class="vn-w-lg">
        <vn-table>
            <vn-thead>
                <vn-tr>
                    <vn-th field="quantity" number>Quantity</vn-th>
                    <vn-th field="workerFk">Worker</vn-th>
                    <vn-th field="shelving" expand>Shelving</vn-th>
                    <vn-th field="parking" expand>Parking</vn-th>
                    <vn-th field="created" expand>Created</vn-th>
                </vn-tr>
            </vn-thead>
            <vn-tbody>
                <vn-tr ng-repeat="itemShelvingSale in $ctrl.itemShelvingSales">
                    <vn-td-editable number shrink>
                        <text>{{itemShelvingSale.quantity}}</text>
                        <field>
                            <vn-input-number class="dense" vn-focus
                                ng-model="itemShelvingSale.quantity"
                                on-change="$ctrl.updateQuantity(itemShelvingSale)">
                            </vn-input-number>
                        </field>
                    </vn-td-editable>
                    <vn-td expand>
                        <span
                            class="link"
                            ng-click="workerDescriptor.show($event, itemShelvingSale.userFk)">
                            {{::itemShelvingSale.name | dashIfEmpty}}
                        </span>
                    </vn-td>
                    <vn-td expand>
                        <vn-autocomplete
                            data="shelvings"
                            show-field="code"
                            value-field="code"
                            ng-model="itemShelvingSale.shelvingFk"
                            on-change="$ctrl.updateShelving(itemShelvingSale)">
                        </vn-autocomplete>
                    </vn-td>
                    <vn-td expand>
                        <vn-autocomplete
                            data="parkings"
                            show-field="code"
                            value-field="id"
                            ng-model="itemShelvingSale.parkingFk"
                            on-change="$ctrl.updateParking(itemShelvingSale)">
                        </vn-autocomplete>
                    </vn-td>
                    <vn-td expand>{{::itemShelvingSale.created | date: 'dd/MM/yyyy HH:mm'}}</vn-td>
                </vn-tr>
            </vn-tbody>
        </vn-table>
        </vn-card>
    </vn-data-viewer>
    <vn-worker-descriptor-popover
        vn-id="worker-descriptor">
    </vn-worker-descriptor-popover>
</vn-popup>