<vn-crud-model
    vn-id="model"
    url="FixedPrices/filter"
    user-params="::$ctrl.filterParams"
    limit="20"
    data="prices"
    order="itemFk"
    auto-load="false">
</vn-crud-model>
<vn-crud-model
    auto-load="true"
    url="Warehouses"
    data="warehouses"
    order="name">
</vn-crud-model>
<vn-portal slot="topbar">
</vn-portal>
<vn-fixed-price-search-panel
    model="model">
</vn-fixed-price-search-panel>
<div class="vn-w-xl">
    <vn-card>
        <smart-table
            model="model"
            options="$ctrl.smartTableOptions"
            expr-builder="$ctrl.exprBuilder(param, value)">
            <slot-table>
                <table>
                    <thead>
                        <tr>
                            <th shrink>
                                <vn-multi-check
                                    model="model"
                                    checked="$ctrl.checkAll"
                                    check-field="checked"
                                    check-dummy-enabled="true"
                                    checked-dummy-count="$ctrl.checkedDummyCount">
                                </vn-multi-check>
                            </th>
                            <th field="itemFk">
                                <span translate>Item ID</span>
                            </th>
                            <th field="name">
                                <span translate>Description</span>
                            </th>
                            <th
                                field="rate2">
                                <span translate>Grouping price</span>
                            </th>
                            <th
                                field="rate3">
                                <span translate>Packing price</span>
                            </th>
                            <th field="minPrice">
                                <span translate>Min price</span>
                            </th>
                            <th field="started">
                                <span translate>Started</span>
                            </th>
                            <th field="ended">
                                <span translate>Ended</span>
                            </th>
                            <th field="warehouseFk">
                                <span translate>Warehouse</span>
                            </th>
                            <th shrink></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="price in prices">
                            <td>
                                <vn-check
                                    ng-model="price.checked"
                                    on-change="$ctrl.saveChecked(price.id)"
                                    vn-click-stop>
                                </vn-check>
                            </td>
                            <td shrink-field>
                                <vn-autocomplete
                                    vn-id="itemFk"
                                    class="dense"
                                    url="Items/withName"
                                    ng-model="price.itemFk"
                                    fields="['name']"
                                    show-field="id"
                                    value-field="id"
                                    search-function="$ctrl.itemSearchFunc($search)"
                                    ng-change="$ctrl.upsertPrice(price, true)"
                                    order="id DESC"
                                    tabindex="1">
                                    <tpl-item>
                                        <div>{{id}}</div>
                                        <div class="text-caption text-secondary">
                                            {{name}}
                                        </div>
                                    </tpl-item>
                                </vn-autocomplete>
                            </td>
                            <td vn-fetched-tags>
                                <div>
                                    <span
                                        vn-one
                                        ng-if="price.itemFk"
                                        ng-click="itemDescriptor.show($event, price.itemFk)"
                                        class="link">
                                        {{itemFk.selection.name}}
                                    </span>
                                    <vn-one ng-if="price.subName">
                                        <h3 title="{{price.subName}}">{{price.subName}}</h3>
                                    </vn-one>
                                </div>
                                <vn-fetched-tags
                                    max-length="6"
                                    item="price"
                                    tabindex="-1">
                                </vn-fetched-tags>
                            </td>
                            <td shrink-field>
                                <vn-td-editable number>
                                    <text>
                                        <strong>{{price.rate2 | currency: 'EUR':2}}</strong>
                                    </text>
                                    <field>
                                        <vn-input-number
                                            class="dense"
                                            vn-focus
                                            ng-model="price.rate2"
                                            on-change="$ctrl.upsertPrice(price)"
                                            step="0.01">
                                        </vn-input-number>
                                    </field>
                                </vn-td-editable>
                            </td>
                            <td shrink-field>
                                <vn-td-editable number>
                                    <text>
                                        <strong>{{price.rate3 | currency: 'EUR':2}}</strong>
                                    </text>
                                    <field>
                                        <vn-input-number
                                            class="dense"
                                            vn-focus
                                            ng-model="price.rate3"
                                            on-change="$ctrl.upsertPrice(price);"
                                            step="0.01"s>
                                        </vn-input-number>
                                    </field>
                                </vn-td-editable>
                            </td>
                            <td shrink-field-expand class="minPrice">
                                <vn-check
                                    vn-one
                                    ng-model="price.hasMinPrice"
                                    on-change="$ctrl.upsertPrice(price)">
                                </vn-check>
                                <vn-input-number
                                    ng-class="{inactive: !price.hasMinPrice}"
                                    ng-model="price.minPrice"
                                    on-change="$ctrl.upsertPrice(price)"
                                    step="0.01">
                                </vn-input-number>
                            </td>
                            <td shrink-date>
                                <vn-chip class="chip {{$ctrl.isBigger(price.started)}} transparent">
                                    <vn-date-picker
                                        vn-one
                                        ng-model="price.started"
                                        on-change="$ctrl.upsertPrice(price)">
                                    </vn-date-picker>
                                </vn-chip>
                            </td>
                            <td shrink-date>
                                <vn-chip class="chip {{$ctrl.isLower(price.ended)}} transparent">
                                    <vn-date-picker
                                        vn-one
                                        ng-model="price.ended"
                                        on-change="$ctrl.upsertPrice(price)">
                                    </vn-date-picker>
                                </vn-chip>
                            </td>
                            <td expand>
                                <vn-autocomplete
                                    vn-one
                                    ng-model="price.warehouseFk"
                                    data="warehouses"
                                    on-change="$ctrl.upsertPrice(price)"
                                    tabindex="2">
                                </vn-autocomplete>
                            </td>
                            <td shrink>
                                <vn-icon-button
                                    icon="delete"
                                    vn-tooltip="Delete"
                                    ng-click="deleteFixedPrice.show({$index})">
                                </vn-icon-button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="vn-pa-md">
                    <vn-icon-button
                        vn-tooltip="Add fixed price"
                        icon="add_circle"
                        vn-bind="+"
                        ng-click="$ctrl.add()">
                    </vn-icon-button>
                </div>
            </slot-table>
        </smart-table>
    </vn-card>
</div>

<div fixed-bottom-right>
    <vn-vertical style="align-items: center;">
        <vn-button class="round sm vn-mb-sm"
            icon="edit"
            ng-show="$ctrl.totalChecked > 0"
            ng-click="edit.show($event)"
            vn-tooltip="Edit fixed price(s)"
            tooltip-position="left">
        </vn-button>
    </vn-vertical>
</div>
<vn-dialog class="edit"
    vn-id="edit"
    on-accept="$ctrl.onEditAccept()"
    on-close="$ctrl.editedColumn = null">
    <tpl-body style="width: 400px;">
            <span translate>Edit</span>
            <span class="countLines">
                {{::$ctrl.totalChecked}}
            </span>
            <span translate>buy(s)</span>
        <vn-horizontal>
            <vn-autocomplete
                vn-one
                ng-model="$ctrl.editedColumn.field"
                data="$ctrl.columns"
                value-field="field"
                show-field="displayName"
                label="Field to edit">
            </vn-autocomplete>
            <vn-input-number
                vn-one
                ng-if="$ctrl.editedColumn.field == 'rate2' || $ctrl.editedColumn.field == 'rate3' || $ctrl.editedColumn.field == 'minPrice'"
                label="Value"
                ng-model="$ctrl.editedColumn.newValue">
            </vn-input-number>
            <vn-check
                vn-one
                ng-if="$ctrl.editedColumn.field == 'hasMinPrice'"
                ng-model="$ctrl.editedColumn.newValue">
            </vn-check>
            <vn-date-picker
                vn-one
                ng-if="$ctrl.editedColumn.field == 'started' || $ctrl.editedColumn.field == 'ended'"
                label="Date"
                ng-model="$ctrl.editedColumn.newValue">
            </vn-date-picker>
            <vn-autocomplete
                vn-one
                ng-if="$ctrl.editedColumn.field == 'warehouseFk'"
                label="Warehouse"
                ng-model="$ctrl.editedColumn.newValue"
                data="warehouses">
            </vn-autocomplete>
        </vn-horizontal>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Save</button>
    </tpl-buttons>
</vn-dialog>

<vn-item-descriptor-popover
    vn-id="item-descriptor"
    warehouse-fk="$ctrl.vnConfig.warehouseFk">
</vn-item-descriptor-popover>
<vn-confirm
    vn-id="deleteFixedPrice"
    on-accept="$ctrl.removePrice($data.$index)"
    question="Are you sure you want to continue?"
    message="This row will be removed">
</vn-confirm>